React：从服务器获取更新的数据而不刷新

如何解决React：从服务器获取更新的数据而不刷新

假设我的React组件结构如下：

App
|-PostList
|-CreatePost

在PostList组件中，我通过从服务器获取数据来填充状态，例如：

...
 const [posts,setPosts] = useState({});
  useEffect(() => {
    async function fetchPosts() {
      try {
        const res = await axios.get(`${BACKEND_API}/posts`)
        await setPosts(res.data)
      } catch (e) {
        console.log(e)
      }
    }
    fetchPosts()
  },[]);

并渲染这些帖子。再次，在我的CreatePost组件中，我创建一个新帖子，并将这些数据发送到服务器，如下所示：

...
  const [title,setTitle] = useState('');
  const submitHandler = async (e) => {
    e.preventDefault();
    await axios.post(`${BACKEND_API}/posts/create`,{ title });
    setTitle('')
  };
...

现在出现问题了。如果不刷新页面，就看不到我的新帖子。我尝试解决此问题，例如在App组件中提升状态并将setPosts处理程序传递给CreatePost组件。因为我正在考虑像这样在submitHandler内再次更新帖子状态：

    async function refreshPosts(setPosts) {
      const res = await axios.get(`${BACKEND_API}/posts`)
      await setPosts(res.data)
    }

我很困惑，这是正确的方式吗？如我所知，提高状态不是一个好的决定。有更好的解决方案吗？我试图避免任何状态管理库。对于这个简单的问题，还有很多额外的工作。

解决方法

提升状态是一个不错的决定，除非您不为3-4级深度的孩子钻道具。

我建议将其放入容器组件（邮政），该容器组件将道具传递到PostList和CreatePost。将来，您的应用程序中可能会包含更多组件。然后，其他将来的组件可能会不必要地re-render。

App
|-Post // put all your state and handlers regarding Post here
 |-PostList // use this just as plain view,just shows the list of the post
 |-CreatePost // use this just as plain view,just form to create a post
|-FutureComponent // handles it own state,doesn't re-render when post change
|-FutureMoreComponent // handles it own state,doesn't re-render when post change

在上述结构中，如果FutureComponent重新呈现，则FutureMoreComponent和Post不会重新呈现，因为Post是一个独立的组件。 / p>

您的组件结构可能看起来像这样

PostList.js

<PostList posts={postsStateFromPostComponent} />

CreatePost.js

<CreatePost onSubmit={apiThatCreatesANewPost} />