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

您的useEffect依赖项[rows]导致您每次useEffect调用setRows时都会触发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永远不会改变，X仅在组件安装上运行。

useEffect（）导致无限循环

1 个答案: