为什么这个 GET 请求会创建无限循环？（反应）答案

【问题标题】：Why does this GET request create infinite loop? (React)为什么这个 GET 请求会创建无限循环？（反应）
【发布时间】：2022-01-14 14:13:47
【问题描述】：

首先，请看代码。

    const [currentUserPK, setCurrentUserPK] = useState(undefined);
    const [currentPage, setCurrentPage] = useState(1);
    const [rowsPerPage, setRowsPerPage] = useState(10);

    //현재 USER_PK 가져오는 API
    const getCurrentUserPk = async () => {
        const url = '/api/account/decoding-token';
        const res = await get(url)
            .then((res) => {
                console.log(res);
                setCurrentUserPK(res.data.USER_PK);
            })
            .catch((error) => {
                console.log(error);
            });
    };

    useEffect(() => {
        getCurrentUserPk()
    },[]);

    //생성된 액션 아이템 불러오기 API
    const getActionItems = async () => {
        const url = `/api/work/view-items`;
        const params = {
            id: currentUserPK,
            currentPage: currentPage,
            feedsPerPage: rowsPerPage,
        };
        await get(url, { params: params }).then((res) => {
            setActionItemArray(res.items);
            console.log(res.items);
            console.log(actionItemArray);
        });
    };

    useEffect(() => {
        getActionItems();
    }, [currentPage, rowsPerPage, actionItemArray]);

以下代码会出现问题。

    useEffect(() => {
        getActionItems();
    }, [currentPage, rowsPerPage, actionItemArray]);

当我在第二个参数数组中添加 actionItemArray 时，它一直在循环

            console.log(res.items);
            console.log(actionItemArray);

这两个 console.log 事件。

当我从 useEffect Hook 的第二个参数中删除 actionItemArray 时，我必须刷新页面以添加、删除和编辑 actionItems。

我不知道为什么会这样。请帮忙！

【问题讨论】：

问题本质上是您发现的问题。当actionItemArray 更改时，您重新渲染useEffect，并且每次调用useEffect 时都会更改它
@Giacomo 是的，但是在我删除项目或编辑项目后，应该没有重新渲染，因为不再有任何更改。但它一直存在！！！

标签： javascript reactjs loops get

【解决方案1】：

useEffect 正在调用一个正在改变状态的函数：setActionItemArray()。更改状态会触发另一个渲染，该渲染又会再次调用useEffect，重新开始流程。

useEffect 在初始渲染时运行，然后由于您实现它的方式，只要数组中的依赖项之一发生更改，就会运行。因此，由于它在页面首次加载时正在运行，因此它在每次页面加载时都会启动它的无限循环

【讨论】：

是的，但是在我删除项目或编辑项目后，应该没有重新渲染，因为不再有任何更改。但它仍然存在。
您没有包含要删除或编辑项目的代码，所以很难说那里发生了什么。
好的，安迪。我会为他们工作。谢谢！

【解决方案2】：

useEffect 的“依赖关系”（第二个参数）意味着值的变化应该触发“效果”（第一个参数）

内部效果，你更改了actionItemArray，它也被传递到依赖项中。

【讨论】：

哇哦。我明白了。谢谢惠城！