问题描述
假设我的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} />