useEffect()导致无限循环

Question

React.useEffect (() => {
if (rows.length === 0) {
async function fetchMyApi() {
const url = `https://reqres.in/api/users?page=2`;
let res = await fetch(url);
res = await res.json();
if (res) {
setRows (res.data);
}
}
fetchMyApi();
}
}, [rows]);

在useEffect中调用API会创建无限循环。我尝试过传递一个空数组，我尝试过所有可能的解决方案，但没有用。

Answer 1

每次调用setRows时，useEffect依赖项[rows]会导致useEffect重新填充，从而创建一个无限循环。

const [rows,setRows] = React.useState([]);
const fetchMyApi = React.useCallback(async () => {
const url = `https://reqres.in/api/users?page=2`;
let res = await fetch(url);
res = await res.json();
if (res){
setRows (res.data);
}
}, [setRows]);
React.useEffect (() =>{
fetchMyApi();
},[fetchMyApi]);

在上面的代码中，useCallback不是必需的，因为该函数没有传递给任何组件。

setRows应在组件的使用寿命内保持恒定。

fetchMyApi将在组件装载上创建，并且每次setRows更改时都会创建。

useEffect将在装载时运行，每次fetchMyApi更改时都会运行。由于fetchMyApi永远不会更改，因此useEffect仅在组件装载时运行。