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所以它应该是[&nbsp; Object {&nbsp; &nbsp; "description": "this is the body text",&nbsp; &nbsp; "key": "8x9RPFqKlyXdwyTQMQqJ",&nbsp; &nbsp; "title": "title here",&nbsp; &nbsp; "topic": "Public",&nbsp; },&nbsp; Object {&nbsp; &nbsp; "key": "DaFVjEUBDrVXDCSsiotr",&nbsp; },&nbsp; Object {&nbsp; &nbsp; "description": "Eek",&nbsp; &nbsp; "key": "n1YAuqv4gaZ2EFDwbCQD",&nbsp; &nbsp; "title": "Eem",&nbsp; &nbsp; "topic": "Public",&nbsp; },]

Answer 3

对于那些在未来挣扎的人：根据 Drew 和 dieu 所说，尝试返回整个对象，其中 .title 不存在。此更改解决了我的问题：&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={posts}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={(item) => <TouchableOpacity onPress={() => console.log(posts)} style={{ backgroundColor: '#ECECEC', marginVertical: 20, height: 100, borderRadius: 10 }}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text >{item.item.title}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />检查该项目实际上试图按照 deidu 建议显示的内容。