Question

我在React挂钩和特效方面有些新手，在使用useEffect时遇到问题

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

上面的代码是我创建的useEffect，它使用axios来获取数据库中的所有数据，并将所有数据置于称为报告的状态。

// 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挂钩的依赖项进行传递，这意味着每次状态变量报表更改时，都会再次触发useEffect。如果只想一次模拟componentDidMount并查询数据，则不必将任何依赖项传递给useEffect。

Answer 2

我已解决问题。

我重新构造了useEffect，它如何立即更新值而不引起无限循环。

我在这里找到了答案。

Why is the cleanup function from `useEffect` called on every render?

useEffect导致无限循环

2 个答案: