我正在做一个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中的最佳实践是什么？因为我觉得这是我会经常遇到的事情。