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

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

尝试使用以下代码：

         <FlatList

            data={posts}

            renderItem={({item, index}) => (

              <TouchableOpacity

                onPress={() => console.log(posts)}

                style={{ backgroundColor: 'yellow', marginVertical: 20 }}

              >

                <Text style={{ fontSize: 30 }}>{item.title}</Text>

              </TouchableOpacity>

            )}

          />

Answer 2

你仍然需要进入里面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 3

对于那些在未来挣扎的人：

根据 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 建议显示的内容。