Flatlist 未显示每个对象元素

Question

试图用来自 firestore 的数据显示一个平面列表，但由于某种原因，应该显示的 {item.title} 不是。 黄色可触摸不透明度显示得很好，它被调用的次数正确（posts 数组中的 3 个对象，3 个黄色框）代码如下：

获取数据：

useEffect(() => {
  const discoverList = firestore()
    .collection('Public')
    .onSnapshot((querySnapshot) => {
      const goals = [];

      querySnapshot.forEach((documentSnapshot) => {
        goals.push({
          ...documentSnapshot.data(),
          key: documentSnapshot.id,
        });
      });
      setPosts(goals);
      setLoading(false);
    });

  return () => discoverList();
}, []);

帖子钩子： const [posts, setPosts] = useState()

平面列表返回：

  return (
    <View style={styles.screen}>
      <View style={{ marginTop: 20, marginHorizontal: 20, flex: 1 }}>
        <View style={styles.searchPos}>
          <Text style={styles.pageTitle}>Discover new goals</Text>
          <SearchBar />
        </View>
        <View style={styles.fl}>
          <FlatList
            data={posts}
            renderItem={(item) => (
              <TouchableOpacity
                onPress={() => console.log(posts)}
                style={{ backgroundColor: 'yellow', marginVertical: 20 }}
              >
                <Text style={{ fontSize: 30 }}>{item.title}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      </View>
    </View>
  );

为了调试，我有可触摸的不透明度打印出帖子数组，这就是正在打印的内容。

Array [
  Object {
    "description": "this is the body text",
    "key": "8x9RPFqKlyXdwyTQMQqJ",
    "title": "title here",
    "topic": "Public",
  },
  Object {
    "key": "DaFVjEUBDrVXDCSsiotr",

  },
  Object {
    "description": "Eek",
    "key": "n1YAuqv4gaZ2EFDwbCQD",
    "title": "Eem",
    "topic": "Public",
  },
]

感谢所有帮助，谢谢！

编辑：

Object {
  "index": 2,
  "item": Object {
    "description": "Eek",
    "key": "n1YAuqv4gaZ2EFDwbCQD",
    "length": 1,
    "title": "Eem",
    "topic": "Public",
  },
  "separators": Object {
    "highlight": [Function highlight],
    "unhighlight": [Function unhighlight],
    "updateProps": [Function updateProps],
  },
}

Answer 1

你仍然需要进入Array所以它应该是

[
  Object {
    "description": "this is the body text",
    "key": "8x9RPFqKlyXdwyTQMQqJ",
    "title": "title here",
    "topic": "Public",
  },
  Object {
    "key": "DaFVjEUBDrVXDCSsiotr",

  },
  Object {
    "description": "Eek",
    "key": "n1YAuqv4gaZ2EFDwbCQD",
    "title": "Eem",
    "topic": "Public",
  },
]

Answer 2

对于任何在未来挣扎的人：

建立在 Drew 和 dieu 所说的基础上，试图返回整个对象，其中 .title 不存在。

此更改解决了我的问题：

                    <FlatList
                        data={posts}
                        renderItem={(item) => <TouchableOpacity onPress={() => console.log(posts)} style={{ backgroundColor: '#ECECEC', marginVertical: 20, height: 100, borderRadius: 10 }}>
                            <Text >{item.item.title}</Text>
                        </TouchableOpacity>}
                    />

检查以查看该项目实际尝试按照 deidu 建议显示的内容。

Answer 3

检查 FlatList 文档： https ://reactnative.dev/docs/flatlist#renderitem

从数据中获取一个项目并将其呈现到列表中。 从data获取{item}字段进行渲染，而不是直接使用data作为item进行渲染，

尝试使用以下代码：

          <FlatList
            data={posts}
            renderItem={({item, index}) => (
              <TouchableOpacity
                onPress={() => console.log(posts)}
                style={{ backgroundColor: 'yellow', marginVertical: 20 }}
              >
                <Text style={{ fontSize: 30 }}>{item.title}</Text>
              </TouchableOpacity>
            )}
          />