Question

如果我尝试渲染像这样的FlatList：

<View>
   <FlatList
     numColumns={2}
     data={[1, 0, 3, null]}
     renderItem={(itemData, idx) => <Text key={idx}>{itemData.item}</Text>}
     horizontal={false}
   />
</View>

返回的唯一内容是1和2（除了它们占用行/列中的空间，就像其他值已经渲染一样 - 它们在列中堆叠）。我无法访问0值或null值（因此我无法有条件地呈现其他内容，即return itemData.item || 'No Data'。

如果我尝试这个（道具略少）：

<View>
    <FlatList
      data={[1, 0, 3, null]}
      renderItem={(itemData, idx) => <Text key={idx}>{itemData.item}</Text>}
    />
</View>

我收到错误Invariant Violation: No item for index 2。

除了事先循环数据并用字符串0和所有"0" s，null替换所有undefined，空字符串等之外，还有解决方案吗？使用字符串"null"并使用其有条件地呈现：return itemData.item !== 'null' ? itemData.item || 'No Data'

Answer 1

看起来当您尝试访问itemData.0时，它理解为false而不是数字0，在尝试访问itemData.null值时会应用相同的逻辑

如果您向renderItem添加console.log，则可以确认我所说的内容是否正确

renderItem={(itemData, idx) => {
  console.log('Trying to render item: ', idx);
  return <Text key={idx}>{itemData.item}</Text>;
}}

假设是这种情况，那么你可以通过以下方式实现你想要的目标：

renderItem={(itemData, idx) => itemData.item && <Text key={idx}>{itemData.item}</Text>}

希望有所帮助

FlatList不会将0或null传递给renderItem prop

1 个答案: