useEffect会导致无限循环

Question

我对react钩子和效果有点陌生，在使用useEffect时遇到了问题

useEffect( _ => {
(async _ => {
  const res = await axios.get('/api/laf/getreportlostitem');
  getReports(res.data);
  setLoading(false);
})();},[reports]);

上面的代码是我构建的useEffect，用于使用axios获取数据库中的所有数据，并且我将所有数据放在一个称为reports的状态中。

// Data State for getting the reports 
const [reports, getReports] = useState([]);

但是当我console.log报告时，它会导致无限循环。我不知道为什么？

让我给你看一个我做的简单动作。

我正在做一个按钮，当它被点击时，报告的状态（按id）将被更新。

  <Button onClick={ _ => setAsFound(row.id)} variant="contained" color="primary">Set as found</Button>
                        |
<ClaimedButton onClick={ _ => setAsClaimed(row.id)} variant="contained" color="primary">
                        Set as claimed
                        </ClaimedButton>

这是该州报告结构的样本草案。

{ name, src, yr, campus, department, course, details, contact, status }

如您所见，对象中有一个“状态”数据。因此，当我单击其中一个按钮时，报告状态下的数据将被更新。下面是按钮的onclick功能。

const setAsFound = id => {

  if(window.confirm("Are you sure this report item is now found?") ){
     const updateStatusFound = {
        status: foundData
      };

      props.setReportToFound(id, updateStatusFound);
  }

};

const setAsClaimed = id => {

  if(window.confirm("Are you sure this report item is now claimed?")){
    const updateStatusClaimed = {
      status: claimedData
    };

    props.setReportToClaimed(id, updateStatusClaimed);
  }

};

founData和claimedData值如下所示。

const [foundData, setFoundData] = useState('Found, Not Claimed');


const [claimedData, setClaimedData] = useState('Found and Claimed');

这只是操作完成后将在数据库中发送的状态值。

其他代码只是我正在处理的操作和功能。但我主要关心的是，为什么报表状态会导致无限循环，甚至是组件中刚刚呈现的数据？我甚至有一个依赖项，这样当数据被更新时，报表状态将被更新，并重新呈现数据。我尝试过不将报告作为依赖项。但问题是，当我删除它时，数据不会更新。有没有办法阻止无限循环？

Answer 1

我解决我的问题。

我重组了我的使用效果，它将如何立即更新值，而不会导致无限循环。

我在这里找到了答案。

为什么每次渲染都会调用“useEffect”中的清理函数？

Answer 2

您将报告作为依赖项传递给useEffect挂钩，这意味着每次状态变量报告更改时，useEffect都将再次触发。如果您只想模拟componentDidMount并查询一次数据，那么您不必向useEffect传递任何依赖项。