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

Question

假设我的 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()
  }, []);

并渲染那些 post。同样，在我的 CreatePost 组件中，我创建了一个新的 post 并将这些数据发送到服务器，如下所示：

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

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

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

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

Answer 1

提升状态是一个不错的决定，除非您不为 3-4 层深的儿童钻道具。

我建议将它放在容器组件 (Post) 中，该组件将道具传递给 PostList 和 CreatePost。将来，您的 App 中可能会有更多组件。然后，其他未来组件可能 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

在上述结构中，如果您的 Post re-render 是 FutureComponent 和 FutureMoreComponent，则不会 re-render 因为 Post 是一个 self-contained 组件。

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

PostList.js

<PostList posts={postsStateFromPostComponent} />

CreatePost.js

<CreatePost onSubmit={apiThatCreatesANewPost} />

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

React: fetch updated data from server without refresh

reactjs

react-state-management