ReactNative FlatList 的初学者问题

Question

我对原生反应还很陌生，并且有一个问题，即我的数据没有显示在我的视图中。 我可以从我的服务器检索它并将其保存在数据数组中。 当我想浏览它并创建一个平面列表时，它没有出现，我不知道为什么。 console.log 输出显示我的数组中有数据，并且在那个时间点 displayList 为真。 任何帮助为什么会发生这种情况？

  return (
    <View style={styles.container}>
      <Button title="Retrieve Data" onPress={fetchData} />
      <Text>before</Text>
      {console.log(
        `Size of Data: ${data.length} and displayList: ${displayList}`
      ) &&
        displayList &&
        data &&
        data.map((item, i) => (
          <FlatList
            data={data}
            renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>}
            keyExtractor={(item) => item}
          />
        ))}
      <Text>after</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Answer 1

通过映射平面列表，您正在为每个数据项创建一个新列表，我怀疑您想要做什么。

渲染项的内部为您提供了地图功能。 我想你要找的是...

return (
    <View style={styles.container}>
        <Button title="Retrieve Data" onPress={fetchData} />
        <Text>before</Text>
            <FlatList
                data={data}
                renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>}
                keyExtractor={(item) => item.id.toString()}
            />
        ))}
        <Text>after</Text>
        <StatusBar style="auto" />
    </View>
);

如果你想在没有数据的情况下渲染其他东西，那么你可以在平面列表上使用ListEmptyComponent道具。

我也不确定你的data数组是什么样的。 但这也可能是一个问题。 如果这不起作用，请使用完整的组件和数据结构更新您的问题。

Answer 2

试试这个，不必遍历地图，该项目已经包含相应索引的对象。

 return ( <View style={styles.container}> <Button title="Retrieve Data" onPress={fetchData} /> <Text>before</Text> {data.lenght()>0? <FlatList data={data} renderItem={({ item }) => <Text>{item["name"].Value[0]}</Text>} keyExtractor={(item) => item} />:<Text>No DATA FOUND<Text>} <Text>after</Text> <StatusBar style="auto" /> </View> );