Firebase 反应原生 flatlist keyExtractor答案

【问题标题】：Firebase react native flatlist keyExtractorFirebase 反应原生 flatlist keyExtractor
【发布时间】：2021-06-16 23:06:45
【问题描述】：

我在平面列表中显示了一些 firebase 数据，并且我在使用 keyExtractor 时遇到问题，我一直遇到错误：

undefined 不是一个对象（评估“item.id”）我已在 firebase 中的所有数据中添加了一个 id 字段，并确保它们是一个字符串，但它仍然无法将其识别为 id。

function Squad() {
  const [gk, setGk] = useState([]);

  useEffect(() => {
    db.collection('squad').orderBy('position').get().then(snapshot => {
      const gkData = snapshot.map(doc => {
        const playerObject = doc.data();
        return { name: playerObject.name, number: playerObject.number, id: playerObject.id };
      });
      setGk(gkData);
      console.log(setGk);
    });
  }, []);

  const Item = ({ name, number }) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{number} - {name}</Text>
    </View>
  );

  const renderItem = ({ item }) => (
    <Item name={item.name} number={item.number} />
  )

  return(
    <View>
      <View style={globalStyles.bar}>
        <Text style={globalStyles.barText}>goalkeeper</Text>
      </View>
      <FlatList 
        data={setGk}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  )
}

【问题讨论】：

这与your previous post 有何不同，您说answer by Perniferous 中的代码不起作用？
我的问题是不再从 firebase 获取数据，但 keyextractor 无法正常工作，其余代码我已经修复。
那么您是说在 Perniferous 告诉您的 useState 钩子的帮助下您能够克服之前的问题吗？因为我很确定他们会很高兴在这种情况下对他们的答案进行投票。

标签： firebase react-native react-native-flatlist

【解决方案1】：

您传递给 Flatlist 的数据是 setter 函数！你想传入“gk”而不是“setGk”

【讨论】：