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

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()
  }, []);

并呈现这些帖子。同样，在我的 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)
    }

我很困惑这是正确的方式吗？正如我听说提升状态不是一个好的决定。有没有更好的解决方案？我试图避免任何状态管理库。这为这个简单的问题带来了很多额外的工作。

Answer 1

在您不为 3-4 层深的儿童钻孔之前，提升状态是一个不错的决定。

我建议将它放在一个容器组件 (Post) 中，该组件将 props 传递给 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 重新渲染，您的FutureComponent 和FutureMoreComponent 将不会重新渲染，因为Post 是一个独立的组件。

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

PostList.js

<PostList posts={postsStateFromPostComponent} />

CreatePost.js

<CreatePost onSubmit={apiThatCreatesANewPost} />