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

您的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 仅在组件挂载时运行。