useEffect 中的 fetch 方法处于无限循环中答案

【问题标题】：Fetch method in useEffect is in infinite loopuseEffect 中的 fetch 方法处于无限循环中
【发布时间】：2022-12-18 08:56:07
【问题描述】：

我正在执行代码的无限循环，但我找不到问题出在哪里。由于我是 React 的新手，所以我有时很难看到问题所在。可能是依赖性还是我忘了关闭某些东西？

import {useCookies} from "react-cookie";
import React, {useEffect, useState} from "react";
import CircularProgress from "@mui/material/CircularProgress";
import {Navigate} from "react-router-dom";

const Date = () => {

    const [cookies] = useCookies(['XRSF-TOKEN']);
    const [loading, setloading] = useState(false);
    const [error, seterror] = useState(false);
    const [users, setusers] = useState([]);

    useEffect(() => {
        setloading(true);
        fetch("/allotherusers", {credentials: "include"})
            .then(response => response.text())
            .then(body => {
                if (body === '') {
                    return <Navigate to="/" />
                }
                else {
                    setusers(JSON.parse(body));
                }
                setloading(false);
            });
    }, [setusers, setloading])

    const userlist = users.map(user => {
        return (
            <div>
                <p> {user.firstname}</p>
                <button onClick={() => like(user, false)}>Like</button>
            </div>
        )
    });

    const like = async (likeduser, superlike) => {
        const likemodel = 
            {
            likeduser: likeduser,
            superlike: superlike

        }

        await fetch('/liked', {
            method: 'POST',
            headers: {
                'X-XSRF-TOKEN': cookies['XRSF-TOKEN'],
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(likemodel),
            credentials: 'include'
        });
    };


    return (
        <div>
            {userlist}
        </div>
    );

}
export default Date;

在这里您可以看到前端如何不断调用 api 请求。

【问题讨论】：

标签： javascript reactjs api fetch

【解决方案1】：

因为 setusers, setloading 都在 useEffect 内部更新，这导致再次触发 useEffect。只需从 useEffect 数组中删除副作用

 }, [])

【讨论】：

【解决方案2】：

是的，问题是依赖性，您正在使用回调（setState）作为依赖性，您可以保留和清空依赖性，因为在页面呈现时调用 api 并设置状态。

 useEffect(() => {
         function fetchUsers(){
           setloading(true);
        fetch("/allotherusers", {credentials: "include"})
            .then(response => response.text())
            .then(body => {
                if (body === '') {
                    return <Navigate to="/" />
                }
                else {
                    setusers(JSON.parse(body));
                }
                setloading(false);
            });
}
      fetchUers();
    }, [])

【讨论】：

【解决方案3】：

在效果函数内部，当您执行 setusers(JSON.parse(body)) 和 setloading(false) 时，您正在将 userData 更新为新数组。即使新数组中的所有项目都完全相同，对新 userData 数组的引用也发生了变化，导致效果的依赖性不同，再次触发函数——无限次。

一种简单的解决方案是简单地从依赖项数组中删除 setusers。这样，useEffect 函数的作用基本上类似于 componentDidMount，它会在组件首次渲染时触发一次且仅触发一次。

 useEffect(() => {
    setloading(true);
    fetch("/allotherusers", {credentials: "include"})
        .then(response => response.text())
        .then(body => {
            if (body === '') {
                return <Navigate to="/" />
            }
            else {
                setusers(JSON.parse(body));
            }
            setloading(false);
        });
}, [])

我想你应该试试这个。！

【讨论】：