React中useEffect无限循环问题排查求助

首先看你的代码，最核心的错误是把useEffect的依赖数组放错位置了——你把[id]写到了catch方法的参数里，而不是作为useEffect的第二个参数。这直接导致你的useEffect没有任何依赖限制，每次组件渲染都会执行它，而setSchool又会触发组件重新渲染，最终形成无限循环。

修正步骤 #

1. 调整依赖数组的位置
   把依赖数组从catch的参数移动到useEffect的第二个参数位置，同时你不需要额外维护id这个状态变量，直接用useParams获取的schoolID作为依赖即可：

import services from '../utilities/services';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function SchoolDetail(){
    const { schoolID } = useParams();
    const [school, setSchool] = useState();

    useEffect(() => {
        services.getSchool(schoolID)
            .then((response) => {
                setSchool(response);
            })
            .catch((e) => {
                alert("Error occured while fetching the school. " + e);
            });
    }, [schoolID]); // 依赖数组正确放置在这里

    return(
        <>
            {school && console.log(school.id)}
            Details
        </>
    );
}

export default SchoolDetail;

2. 移除多余的状态变量
   你定义的const [id, setID] = useState(schoolID);完全没有必要，useParams返回的schoolID在路由参数不变的情况下是稳定的，可以直接作为useEffect的依赖。

关于你的疑问 #

无限循环和getSchool返回Promise没有关系，Promise本身不会触发组件重新渲染，问题完全是因为useEffect没有被正确的依赖数组限制，导致每次渲染都重复执行数据请求和状态更新。

内容的提问来源于stack exchange，提问作者user568551