正在尝试将数据从useEffect获取到要显示的平面列表中

Question

我试图通过useEffect将数据从Firestore获取到平面列表，但平面列表没有读取useEffect提供的数据。我知道平面列表在useEffect渲染之前进行渲染，但我如何将数据从useEffect推送到平面列表。这是我的密码。这段代码获取数据并更新userPosts，但我从useEffect获得的userPosts没有更新到Flatlist组件中。

import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
import { connect } from 'react-redux'
import firebase from 'firebase'

function FavDiscussion(props) {
const { currentUser, posts } = props;
const [userPosts, setUserPosts] = useState([]);
const favDiscussion = []


useEffect(() => {

firebase.firestore()
.collection("Discussion")
.doc(currentUser.FavDiscussion[1])
.get()
.then((snapshot) => {

setUserPosts(snapshot.data())

})

}, [])


return (
<View style={{ justifyContent: "center", alignItems: "center" }}>

<FlatList
horizontal={false}
extraData={userPosts}
data={userPosts}
keyExtractor={userPosts => userPosts.id}

renderItem={({ item }) => ( 

<View>
<View style={styles.gridItem} >
<TouchableOpacity style={{ flex: 1 }} onPress={() => props.navigation.navigate('EditDeleteDiscussion', { did: item.id })}>
<View style={styles.container2}>
<Text style={styles.faculty}>
{item.faculty}
</Text>

<Text style={styles.title}>
{item.title}
</Text>

</View>
</TouchableOpacity>
</View>
</View>
)}
/>
</View>
)
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#140F38', 
alignItems: 'center',
justifyContent: 'center',
},

container2: {
padding: 15,
justifyContent: "space-around",
alignItems: "flex-start"
},

input: {
margin: 5,
height: 55,
borderColor: '#E3562A',
borderWidth: 1,
backgroundColor: '#FFF',
width: 300,
borderRadius: 12,
padding: 8,
fontFamily: 'Poppins',
position: "absolute",
height: 37,
left: 11,
right: 49,
top: 51,
flexDirection: 'row',
},

bell: {
position: "absolute",
width: 30,
height: 30,
left: 330,
top: 59,

},
search: {
padding: 10,
alignItems: 'flex-end'
},
gridItem: {
flex:1,
margin: 15,
width: 340,
height: 114,
borderRadius: 16,
// overflow: Platform.OS ==='android' && Platform.Version>=21 ? "hidden" : 'visible',
elevation: 5,
backgroundColor: "#003565",
},

faculty: {
color: "#fff",
fontSize: 15,
fontFamily: 'Poppins',
},
title: {
color: "#fff",
fontSize: 30,
fontFamily: 'Poppins',
},


});
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
posts: store.userState.posts,
})
export default connect(mapStateToProps, null)(FavDiscussion);

Answer 1

当没有向平面列表提供正确的密钥时，我遇到了同样的问题，请像这样添加密钥提取器：keyExtractor={item => item.id}