为什么 useEffect 每次从 Home 组件加载组件时都会运行<PostList/>

Question

我正在开发一个社交媒体应用程序并陷入困境。

在

src > component > PostList

内部，我使用了

useEffect

和空依赖数组，但是每当我在SideBar内使用createPost并再次返回useEffect时，都会导致我无法添加任何额外的帖子。

https://github.com/santukumar01/learning-react/tree/main/Social%20Media%20App%20-%20version-%202

如何解决这个问题以及为什么每个

useEffect

都在运行。

Answer 1

您的 useEffect 正在重新运行，因为每次 Sidebar.jsx 中的

selectedTab

 更改时，组件都会重新安装：

{selectedTab === "home" ? <PostList /> : <CreatePost />} 为了解决这个问题，我建议将数据获取移动到更稳定的地方，例如

context 或外部状态管理解决方案，例如 zustand，然后将数据作为 props 传递给 PostList。

Answer 2

防止 PostList 组件不必要的重新渲染的一种方法是 在其上使用 key 道具并在需要时更改 key 重新安装。由于您使用选项卡在不同视图之间切换 （“主页”和“创建帖子”），您可以使用所选选项卡作为键 PostList 组件。这样，每当选定的选项卡发生变化时， React 会将其视为不同的组件并重新安装它，从而导致 使用效果只在必要时运行。

大多数时候，我在地图中使用一个键，在组件中使用它，键就可以工作 相似地 反应。备忘录。当您更改选项卡并增加键值时， 更改组件检查键后组件将呈现。

function App() {
  const [selectedTab, setSelectedTab] = useState("home");
  const [postListKey, setPostListKey] = useState(0);

  useEffect(() => {
    setPostListKey(prevKey => prevKey + 1);
  }, [selectedTab]);

  return (
    <PostContexProvider>
      <div className="app-container">
        <SideBar setSelectedTab={setSelectedTab} selectedTab={selectedTab} />
        <div className="content">
          <Header />
          {selectedTab === "home"? <PostList key={postListKey} /> : <CreatePost />}
          <Footer />
        </div>
      </div>
    </PostContexProvider>
  );
}