Question

'myPosts' 有一个包含多个帖子的对象。我希望用户配置文件在上传后立即显示该帖子，因此我在依赖项数组中传递了 'myposts'。

但问题是组件正在无限地重新渲染。我怎样才能让它重新渲染一次，只有在上传新帖子时？我不明白为什么在数组中传递 'myposts' 会导致无限渲染而不是只渲染一次。

  const [myposts, setPosts] = useState([]);
  useEffect(() => {
  fetch('/mypost', {
    headers: {
     cookie: 'access_key',
    },
   })
     .then((res) => res.json())
     .then((data) => {
     // console.log(data);
     setPosts(data.myposts);
  });
 }, [myposts]);

Answer 1

当fetch解析时，它会修改myposts，这会触发一个fetch，因为它被列为useEffect的依赖，它会修改我的帖子，所以它继续......

myposts 似乎取决于获取的结果，而不是相反。所以我建议从依赖列表中删除 myposts。

Answer 2

当 myposts 更新时调用 useEffect 钩子。在提取的最后 .then 中，您通过 setPosts 更新它。解决此问题的最佳方法是将依赖项数组设为空数组。
但这并不能解决从服务器更新帖子的问题，但这也可以在带有 setInterval 的周期性函数中完成。这将导致类似于下面的代码。

const [myposts, setPosts] = useState([]);

const update = fetch('/mypost', {
  headers: {
    cookie: 'access_key',
  },
})
.then((res) => res.json())
.then((data) => {
  // console.log(data);
  setPosts(data.myposts);
});

useEffect(() => {
  update()
  const interval = setInterval(update, 30000)
  return () => clearInterval(interval)
}, []);

尽管将参数传递给依赖数组，但 React useEffect 仍会导致无限重新渲染

2 个答案: