React Native中如何用三元运算符实现cookUp空数组的条件渲染

当前判断逻辑命中了JavaScript的真值判定规则：JS中长度为0的空数组[]转换为布尔值时结果为true，因此原代码里cookUp ? ...的判断，永远会走入渲染FlatList的分支，完全无法在cookUp为空数组时触发空状态渲染。

将三元运算符的判断条件从直接读取cookUp的布尔值，改为校验cookUp是否为有效数组且数组长度大于0，修改后完整代码如下：

return (
  Array.isArray(cookUp) && cookUp.length > 0 ? ( 
      <FlatList
          data={cookUp}
          keyExtractor={(item) => String(item.id)}
          // keyExtractor={(item, index) => {
          //     return `${index}`;
          // }}
          renderItem={({item}) => (
              <Hey>
                  {item.name}
              </Hey>
          )}
      />
  ) : (<Hey>hiaaaaaa</Hey>)
);

补充优化：React Native的FlatList组件本身内置了ListEmptyComponent属性专门用于处理列表为空的场景，不需要额外拆分三元判断，代码会更简洁，示例写法如下：

return (
  <FlatList
      // 兜底传入空数组，避免cookUp初始值为null/undefined时组件读取data属性报错
      data={cookUp ?? []}
      keyExtractor={(item) => String(item.id)}
      // 将空状态组件直接绑定到FlatList的内置属性上
      ListEmptyComponent={<Hey>hiaaaaaa</Hey>}
      renderItem={({item}) => (
          <Hey>
              {item.name}
          </Hey>
      )}
  />
);

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