将新项从数据库追加到组件状态的列表顶部

Question

我的应用程序上有一个数据库监听器，每当用户发布内容时，它都会更新我的数据状态。当我收到新的帖子时，我会更新我的状态，称为"；帖子"；其是具有FlatList渲染的所有项目的阵列。

问题是，在更新状态后，我无法在列表的顶部看到新帖子，直到我向下(到列表的底部(，然后回到顶部。

我的FlatList代码是：

const keyExtractor = ({id}) => id
...
const renderItem = ({ item }) => {
const {
uri,
description,
location,
width,
height,
likes,
comments,
date,
} = item;
return (
<Card
uri={uri}
description={description}
location={location}
width={width}
height={height}
likes={likes}
date={date}
/>
);
};
return (
<FlatList
data={data} // data is the post state of the parent
renderItem={renderItem}
keyExtractor={keyExtractor}
initialNumToRender={15}
windowSize={WINDOW_HEIGHT * 2}
maxToRenderPerBatch={15}
updateCellsBatchingPeriod={50}
removeClippedSubviews={false}
ListFooterComponent={
isLoading ? (
<View style={styles.footer}>
<Loading type="ios" size={18} color={colors.gray} />
</View>
) : null
}
/>
);
}

这就是我如何更新后状态(在平面列表的父组件中(

function Posts(props) {
const [posts, setPosts] = useState([]);
useEffect(() => {
const { firebase } = props;
let postsArray = [];
// Realtime database listener
const unsuscribe = firebase
.getDatabase()
.collection("posts")
.doc(firebase.getCurrentUser().uid)
.collection("userPosts")
.orderBy("date") // Sorted by upload date
.onSnapshot((snapshot) => {
let changes = snapshot.docChanges();
changes.forEach((change) => {
if (change.type === "added") {
// Get the new post
const newPost = change.doc.data();
// Add the new post to the posts list
postsArray.unshift(newPost);
}
});
// Reversed order so that the last post is at the top of the list
setPosts(postsArray);
});
/* Pd: At the first time, this function will get all the user's posts */
return () => {
// Detach the listening agent
unsuscribe();
};
}, []);
return (
<View style={styles.container}>
<CardList data={posts} />
</View>
);
}

Answer 1

问题可能是由添加新帖子的方式引起的：

postsArray.unshift(newPost)
..
setPosts(postsArray)

它似乎不会影响postsArray的引用，因此不会发生状态更新，也不会看到重新渲染。

你可以试试：

setPosts([...postsArray])

Answer 2

指定一个标记属性extraData，用于通知列表重新渲染(因为它实现了PureComponent(。如果您的renderItem、Header、Footer等函数中的任何一个依赖于数据道具之外的任何东西，请将其粘贴在此处并进行免疫处理。

您的更新将是：

<FlatList
data={data} 
renderItem={renderItem}
keyExtractor={keyExtractor}
extraData={/* You need to create another state variable which also changes when a post is added*/}
/>

欲了解更多信息，请访问此处