React useEffect无限渲染与陈旧状态问题：增删帖子后需刷新页面的解决方案困境

我来帮你解决这个问题，你遇到的无限渲染本质是useEffect的依赖项和状态更新形成了循环——你把posts放进依赖数组，而useEffect里又调用了setPosts更新它，每次状态变更都会触发useEffect重新执行，反复拉取数据、更新状态，自然就陷入无限循环了。

下面给你两种可行的解决方案，你可以根据需求选择：

方案一：用独立的刷新触发器（确保数据与后端完全同步） #

这种方法用一个专门的状态作为刷新信号，每次增删操作后触发这个信号，让useEffect重新拉取数据，同时彻底避免依赖posts导致的循环。

修改步骤： #

1. 添加一个用于触发刷新的状态：

const [refreshTrigger, setRefreshTrigger] = useState(0);

2. 修改useEffect的依赖数组，把posts换成refreshTrigger：

useEffect(() => { 
  const getUsersData = async () => { 
    const results = await getUsers(); 
    setUsers(results.data); 
    console.log(results.data); 
  }; 
  const getPostData = async () => { 
    const results = await getPosts(); 
    console.log(results.data); 
    setPosts( 
      results.data.sort((p1, p2) => { 
        return new Date(p2.created_at) - new Date(p1.created_at); 
      }) 
    ); 
  }; 
  getUsersData(); 
  getPostData(); 
}, [refreshTrigger]); // 替换为刷新触发器，不再依赖posts

3. 在handleDelete函数中，删除成功后更新刷新触发器：

const handleDelete = async (postId, userId) => {
  // 先执行删除请求
  await deletePost(postId, userId);
  // 更新触发器，触发useEffect重新拉取最新数据
  setRefreshTrigger(prev => prev + 1);
};

方案二：直接更新本地状态（优化性能，减少后端请求） #

如果你的增删操作逻辑可靠，也可以在操作成功后直接修改本地的posts状态，不用重新拉取整个列表。这样既避免了无限渲染，也减少了HTTP请求，性能更优。

修改步骤： #

只需要修改handleDelete函数，在删除成功后过滤掉对应的帖子：

const handleDelete = async (postId, userId) => {
  await deletePost(postId, userId);
  // 直接更新本地posts状态，移除被删除的帖子
  setPosts(prevPosts => prevPosts.filter(post => post.post_id !== postId));
};

同时记得把useEffect的依赖数组改回空数组（只在组件挂载时拉取一次初始数据）：

useEffect(() => { 
  // ... 原有的getUsersData和getPostData逻辑
}, []); // 空数组，仅在组件挂载时执行一次

两种方案的对比 #

• 方案一更适合需要确保本地数据与后端完全一致的场景（比如存在多用户同时修改数据的情况），但会多一次HTTP请求。
• 方案二更高效，适合单用户操作或不需要实时同步其他用户修改的场景，能减少不必要的请求次数。

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