useEffect 导致无限渲染循环

【问题标题】：useEffect causing an infinite render loopuseEffect 导致无限渲染循环
【发布时间】：2020-05-04 18:37:40
【问题描述】：

我正在使用 react useEffect 从我的后端获取数据，但它会不停地向我的终端发送相同的消息。

我的代码

function DataFetching() {

    let [posts, setPosts] = useState([]); 

    useEffect(() => {
        axios.get('http://localhost:8080/zoom')
            .then(res => {
                setPosts(res.data);
            })
            .catch(err => {
                console.log(err)
            })
    })

我在终端上收到的垃圾邮件

Executing (default): SELECT `id`, `subject`, `MEETINGID`, `Password`, `createdAt`, `updatedAt` FROM `data` AS `data`;```

【问题讨论】：

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

setPosts() 导致 DataFetching 重新渲染，并且由于您的 useEffect() 没有声明依赖项列表，它会在每个渲染后评估效果，因此您基本上已经编写了一个异步无限循环。

你的效果只依赖于setPosts()，所以你应该声明它是唯一的依赖。或者，认识到 setPosts() 已经被 React 记忆，声明完全没有依赖关系：

useEffect(() => {
  axios.get('http://localhost:8080/zoom').then(res => {
    setPosts(res.data);
  }).catch(err => {
    console.log(err);
  });
}, [/*setPosts*/]);

【讨论】：