我正在做一个facebook的克隆。这个站点的主要组成部分之一,是一个包含帖子列表的提要。这些帖子来自数据库,并被动态呈现,这一切都很好。
在Feed.js中
const [posts, setPosts] = useState([]);
...
<div id='feed' role="feed">
{posts.map(
post => ( <Post setPosts={ setPosts } post={ post } key={ post._id } /> )
)}
</div>
在Post.js中
const handleClick = async () => {
try {
await fetch(`/posts/${post._id}`, {
method: 'delete',
headers: {
'Authorization': `Bearer ${token}`
}
})
} catch (err) {
console.error(err.message);
}
};
<div className="post">
<article data-cy="post" key={ post._id }>{ post.message }</article>
<button onClick={handleClick}>delete post</button>
</div>
其中Post是Feed的子级。
单击删除按钮时,帖子将按预期从数据库中删除,但在刷新浏览器之前,帖子不会从页面中删除。
我怎么才能让post组件中的delete按钮被点击时,feed组件也被重新呈现呢?我曾经想过传递状态,但是为了从数组中删除特定的post,我需要传递posts
和setPosts
作为 prop ,这是不是一个糟糕的实践?对于这种场景,React中的最佳实践是什么?因为我觉得这是我会经常遇到的事情。
1条答案
按热度按时间f87krz0w1#
方法1:将帖子标记为已删除
在
Post
中,您可以处理向服务器发送的删除帖子的请求。之后,你可以设置
isDeleted
标志(在Post
中),如果帖子被标记为已删除,那么你只需要返回null
,这样你就不会渲染Post
,也不会触及父组件的状态,这意味着没有其他组件被重新渲染。当然,这种方法意味着,如果有东西迫使父级重新呈现,你可能会失去你的帖子的内部状态。
方法二:过滤掉已删除的帖子
方法1中Post处理删除请求。它还获得
onDeleteSuccess
回调属性。您可以使用deleted post id调用。然后Feed可以过滤掉已删除的帖子。不幸的是,这部分将重新呈现所有帖子。方法三:使用React查询
我不直接介绍你的情况,但我认为你很快就会明白的。正如你很快就会注意到的,从服务器获取数据并不容易。有很多方面需要介绍。React Query是一个很好的获取数据的工具。它会缓存你获取的数据。删除帖子后,你可以更新缓存。它类似于方法2,但具有React查询的所有优点。
抱歉,如果方法3偏离你最初的问题太远了;-)