React Native校验null/undefined/空值后调用map仍报错如何解决？

• JSX语法不支持在标签内部直接书写if条件语句，你当前的写法中if判断逻辑不会生效，当sizes为null时仍会执行map调用，触发报错。
• 现有判断条件未验证sizes是否为数组类型，map是数组专属方法，即使sizes不是undefined/null/空字符串，只要它不是数组类型，调用map就会抛出「undefined is not a function」的错误。
• 列表渲染未添加key属性，会触发React的控制台警告。

{/* colors */}
<View>
  {Array.isArray(data?.colors) && data.colors.map((item, index) => (
    <View style={styles.AvailabilityWrapper} key={index}>
      <Text>{item}</Text>
    </View>
  ))}
</View>

{/* sizes */}
<View>
  {Array.isArray(data?.sizes) && data.sizes.map((item, index) => (
    <View style={styles.AvailabilityWrapper} key={index}>
      <Text>{item}</Text>
    </View>
  ))}
</View>

如果需要避免空数组渲染无意义的空节点，可以在判断条件后补充&& 数组变量.length > 0即可。

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