平面列表没有向我显示任何结果，为什么？

Question

我正在学习react native，并试图在flatlist中显示数据，但它不起作用，我不知道为什么这是我的代码：

<FlatList 
numColumns={3}
data={posts}
horizontal={false}
renderItem={(item) => 
<Image 
style={{width:100, height:100, backgroundColor:"black"}}
onLoadStart={() => {
console.log("Loading"); 
}}
resizeMode='contain'
source={{uri: item.imageUri}} />
}
/>

以及我的数据代码：

const docRef = doc(db, "posts", auth.currentUser.uid);
const colRef = collection(docRef, "userPosts");
const q = query(colRef, orderBy("createAt", "asc"));
getDocs(q).then((docsSnap) => {
let posts;
docsSnap.forEach(doc => {
// doc.data() is never undefined for query doc snapshots
const data = doc.data();
const id = doc.id;
posts = {id, ...data};
});              
..............the rest of code

为什么它不起作用？

Answer 1

我真的不确定你是否有这个错误
当我试图在ScrollView、中嵌套平面列表时，我遇到了这个错误

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

所以我认为flatlist和scrollView之间存在冲突，尽量使其水平！用horizontal替换horizontal={false}不过它对我有用！

Answer 2

为了触发视图的重新发布，您必须将帖子置于状态。请参阅：https://reactnative.dev/docs/state

如果您使用的是功能组件，您可以简单地使用useState()挂钩，如下所示：

const [posts, setPosts] = useState()
heredocsSnap.forEach(doc => {
// doc.data() is never undefined for query doc snapshots
const data = doc.data();
const id = doc.id;
setPosts({id, ...data});
});