为何<PostList/>组件从Home加载时useEffect重复执行？如何解决？

原因分析 #

1. 组件重复挂载：从createPost页面返回时，PostList组件被卸载后重新挂载了。空依赖数组的useEffect会在组件每次挂载时执行，如果你的useEffect里是从初始数据源（比如硬编码的mock数据）加载帖子，就会把新添加的帖子覆盖掉，导致看不到新增内容。
2. 状态未持久化：帖子状态只保存在PostList组件内部，当组件卸载后状态丢失，重新挂载时又从初始值开始，自然看不到新添加的帖子。

解决方法 #

方法1：全局状态管理 #

把帖子的状态提升到全局（比如用React Context API），这样不管PostList组件是否卸载，状态都能保留：

• 创建一个PostContext，在顶层组件（比如App.js）中管理posts状态和添加帖子的方法。
• 在PostList中通过useContext获取posts，而不是在组件内部维护状态。
• createPost页面提交新帖子时，调用全局的添加方法更新posts，返回PostList时直接读取全局状态，无需重新加载初始数据。

方法2：调整路由结构 #

确保PostList在路由切换时不被卸载：

• 使用嵌套路由，把createPost作为PostList的子路由，让PostList始终处于DOM中。比如在路由配置里：

  <Route path="/" element={<PostList />}>
    <Route path="createPost" element={<CreatePost />} />
  </Route>
  

  这样切换到createPost时，PostList不会被卸载，useEffect不会重复执行，组件内部状态也能保留。

方法3：优化组件内状态逻辑 #

如果暂时不想用全局状态或改路由，调整PostList的逻辑：

• 把初始帖子数据作为组件的初始state，useEffect只在挂载时初始化一次。
• 新增帖子时，直接通过setPosts把新帖子追加到现有数组中，而不是依赖useEffect重新加载。比如在接收新帖子的逻辑里：

  const addNewPost = (newPost) => {
    setPosts(prevPosts => [...prevPosts, newPost]);
  };
  

  同时确保从createPost返回时，能把新传递过来的帖子通过props或回调更新到PostList的状态里。

内容的提问来源于stack exchange，提问作者SANTU KUMAR