React Native 针对数组的条件判断逻辑无法正常生效问题求助

问题根因 #

你现有判断逻辑失效的核心原因有两个：

• 初始状态把cryptoTradingSignals设为数组，但接口实际返回的是对象类型，对象不存在length属性，cryptoTradingSignals.length !== 0的判断永远为假
• 空原型对象在JS中做真值判断时会返回true，你只判断了非undefined、非null，无法识别接口返回的无数据空对象

修复方案 #

步骤1：修正初始状态，和接口返回类型对齐

this.state = {
  cryptoTradingSignals: null, // 初始为null代表还未拉取到有效数据
}

步骤2：改造数据请求逻辑，提前校验数据有效性

fetchCryptoStats(selectedCrypto) {
  getCryptoTradingSignals(selectedCrypto).then(cryptoTradingSignal => {
    // 校验规则可根据实际有效数据的特征调整，这里默认有效数据必须包含你要用到的inOutVar属性
    const isValidData = typeof cryptoTradingSignal === 'object'
      && cryptoTradingSignal !== null
      && 'inOutVar' in cryptoTradingSignal
      && Object.keys(cryptoTradingSignal).length > 0
    this.setState({
      cryptoTradingSignals: isValidData ? cryptoTradingSignal : null
    })
  });
}

步骤3：简化渲染判断逻辑，同时修正原有分类显示的反向判断

{this.state.cryptoTradingSignals && (
  <View
    style={{
      flex: 1,
      alignItems: 'center',
      paddingBottom: 30,
    }}>
    <Text style={styles.sectionHeader}>
      Market Signals
    </Text>
    <Box
      style={{margin: 5}}
      width="80%"
      bg="white"
      p="5"
      shadow={2}
      rounded="md"
      _text={{
        fontSize: 'md',
        fontWeight: 'bold',
        color: 'black',
      }}>
      <View style={{flexDirection: 'column'}}>
        <Text
          style={styles.marketSentimentTitle}>
          In The Money Signal
        </Text>
        <Text>
          Category:{' '}
          {/* 原有判断逻辑写反了，有值时显示值，无值显示not available */}
          {this.state.cryptoTradingSignals.inOutVar.category ?? 'not available'}
        </Text>
        <Text>
          Sentiment:{' '}
          {this.state.cryptoTradingSignals.inOutVar.sentiment ?? ''}
        </Text>
      </View>
    </Box>
  </View>
)}

如果运行环境不支持空值合并运算符??，可以替换为三元判断：this.state.cryptoTradingSignals.inOutVar.category ? this.state.cryptoTradingSignals.inOutVar.category : 'not available'

内容的提问来源于stack exchange，提问作者Frank Boccia