React useEffect出现无限循环，新增帖子后无法自动刷新列表如何解决？

• 无限循环：posts作为useEffect依赖时，每次请求完成调用setPosts会更新posts的值，进而再次触发useEffect执行，形成无限请求的死循环。
• 空依赖不更新：空数组依赖的useEffect仅会在组件首次挂载完成后执行1次，后续没有触发重执行的条件，新增帖子后自然不会刷新数据。

方案1：新增帖子成功后主动触发刷新（性能最优，优先推荐） #

通过新增触发器状态，在发帖成功后主动变更触发器来触发数据重拉，不需要额外的定时请求。
修改后的App组件代码如下：

function App() {
  const [posts, setPosts] = useState([]);
  // 新增刷新触发器，值变更就会触发useEffect重执行
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  useEffect(() => {
    const jwt = localStorage.getItem("jwt");

    fetch('https://localhost:44366/api/Posts/getAllPosts', {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + jwt
      },
    })
    .then(r => r.json())
    .then(result => setPosts(result));
  }, [refreshTrigger]); // 依赖替换为触发器

  // 新增刷新回调，传给发帖的组件调用
  const handlePostSuccess = () => {
    setRefreshTrigger(prev => prev + 1);
  };

  return (
    <div >
      <Router>
        {/* 给Header传入发帖成功的回调，在发帖接口请求成功后调用该方法即可触发刷新 */}
        <Header onPostSuccess={handlePostSuccess} />
        <main className="App">
          {
            posts.map(post => (
              <Post 
                key={post.CreatedOn} 
                username={post.User.FirstName} 
                title={post.Title} 
                content={post.Content} 
                images={post.ImageUrls} 
                avatarImage={post.User.MainImageUrl} 
              />
            ))
          }
        </main>
      </Router>
      <Footer />
    </div>
  );
}

额外注意： #

你当前Post组件的key属性写法是错误的，React的列表渲染key必须直接绑定在map返回的根组件上，不能传入组件内部绑定到div上，否则列表更新会出现异常，可删除Post组件内部的keyToAppend相关逻辑。

方案2：跨端/无回调场景下的实时同步 #

如果存在多端发帖、无法拿到发帖成功回调的场景，可以选择以下两种方式实现自动刷新：

1. 短轮询：设置定时器定时拉取最新数据，适合实时性要求不高的场景，示例代码如下：

useEffect(() => {
  const fetchPosts = () => {
    const jwt = localStorage.getItem("jwt");
    fetch('https://localhost:44366/api/Posts/getAllPosts', {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + jwt
      },
    })
    .then(r => r.json())
    .then(result => setPosts(result));
  };
  // 首次加载先拉取一次
  fetchPosts();
  // 每30秒拉取一次，间隔可根据业务需求调整
  const timer = setInterval(fetchPosts, 30 * 1000);
  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearInterval(timer);
}, []);

2. WebSocket推送：如果对实时性要求较高，可对接WebSocket服务，后端有新帖子生成时主动推送给前端，前端收到推送后执行拉取数据的逻辑即可，性能远高于轮询。

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