亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Flatlist 不顯示每個對象元素

Flatlist 不顯示每個對象元素

慕沐林林 2023-07-06 15:29:47
嘗試顯示包含來自 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],  },}
查看完整描述

3 回答

?
茅侃侃

TA貢獻1842條經驗 獲得超21個贊

從數據中獲取一個項目并將其呈現到列表中。{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>

? ? ? ? ? ? )}

? ? ? ? ? />


查看完整回答
反對 回復 2023-07-06
?
肥皂起泡泡

TA貢獻1829條經驗 獲得超6個贊

你仍然需要進入里面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",

  },

]


查看完整回答
反對 回復 2023-07-06
?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

對于那些在未來掙扎的人:


根據 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 建議顯示的內容。


查看完整回答
反對 回復 2023-07-06
  • 3 回答
  • 0 關注
  • 190 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號