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

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

reactjs

Reactjs 反应：从服务器获取更新的数据而不刷新,reactjs,react-state-management,Reactjs,React State Management,假设我的React组件结构如下所示： App |-PostList |-CreatePost 在PostList组件中，我通过从服务器获取数据来填充状态，如：。。。 const[posts，setPosts]=useState（{}）； useffect（（）=>{ 异步函数fetchPosts（）{ 试一试{ const res=await axios.get（`${BACKEND\u API}/posts`）等待设置柱（恢复数据） }捕获（e）{ 控制台日志（e） } } fetchP

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

App
|-PostList
|-CreatePost

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

。。。
const[posts，setPosts]=useState（{}）；
useffect（（）=>{
异步函数fetchPosts（）{
试一试{
const res=await axios.get（`${BACKEND\u API}/posts`）
等待设置柱（恢复数据）
}捕获（e）{
控制台日志（e）
}
}
fetchPosts（）
}, []);

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

。。。
const[title，setTitle]=useState（“”）；
const submitHandler=async（e）=>{
e、 预防默认值（）；
等待axios.post（`${BACKEND\u API}/posts/create`，{title}）；
setTitle（“”）
};
...

现在问题出现了。如果不刷新页面，我就看不到我的新帖子。我试图解决这个问题，比如在App组件中提升state，并将

setPosts

处理程序传递给CreatePost组件。因为我想在

submitHandler

中再次更新我的帖子状态，如下所示：

异步函数刷新帖子（setPosts）{
const res=await axios.get（`${BACKEND\u API}/posts`）
等待设置柱（恢复数据）
}

我很困惑，这是正确的方式吗？正如我所听说的，提升国家地位不是一个好的决定。有没有更好的解决办法？我试图避免任何国家管理自由。对于这个简单的问题，需要做很多额外的工作。

提升状态是一个很好的决定，除非你不为3-4层深度的儿童钻道具

我建议将它放在一个容器组件（Post）中，该组件将道具传递给

PostList

和

CreatePost

。将来，你的应用程序中可能会有更多的组件。然后，其他未来组件可能会不必要地重新呈现

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} />