React报错：Too many re-renders，已用useEffect仍无限循环求助

从你贴的代码看，本身不会触发无限循环——useEffect用了空依赖数组，只会在组件首次挂载时执行一次getCompanies，更新状态后组件重新渲染，但useEffect不会再次触发。出现报错的可能原因如下：

1. 子组件触发父组件状态更新 #

仔细检查<FindAvailableEmployeesForm>和<NoCompaniesFound>的内部逻辑：

• 如果子组件中调用了修改父组件noCompanyFound或companies的方法，会导致父组件反复渲染，进而引发循环。
• 比如子组件是否接收了父组件的回调函数，且在渲染、生命周期或事件中频繁调用该回调。

2. useEffect依赖数组被误修改 #

你提供的代码里useEffect依赖是空数组，但如果实际代码中不小心把getCompanies、companies或noCompanyFound加入了依赖：

• getCompanies定义在组件内部，每次渲染都会生成新的函数引用，会导致useEffect反复执行，触发无限循环。
• 解决：用useCallback包裹getCompanies，避免每次渲染生成新函数，或者把getCompanies移到组件外部（如果不需要访问组件内的state/props）。

示例修改：

import { useState, useEffect, useCallback } from 'react';

export default function FindAvailableEmployee() {
    const [noCompanyFound, setNoCompanyFound] = useState(true);
    const [companies, setCompanies] = useState([]);
    
    const getCompanies = useCallback(async () => {
        const response = await getMyCompanies();
        
        if(response.data.status === 200)
        {            
            setNoCompanyFound(response.data.companies.length === 0);
            if(response.data.companies.length > 0) {
                setCompanies(response.data.companies);
            }
        }
    }, []); // 若getMyCompanies依赖组件内变量，需添加对应依赖

    useEffect(() => { 
       getCompanies();       
      }, [getCompanies])
    
    return (
        <div>        
            {noCompanyFound? <NoCompaniesFound/> : <FindAvailableEmployeesForm companyData={companies}/>}
        </div>      
    )
}

3. API返回值导致的间接循环 #

如果getMyCompanies每次返回的response.data.companies是新数组引用（即使内容完全相同），且子组件<FindAvailableEmployeesForm>中对companyData做了引用类型的依赖监听，可能导致子组件反复更新，间接引发父组件的渲染循环。可以在setCompanies前做浅比较，避免不必要的状态更新：

// 自己实现浅比较逻辑，或使用lodash的isEqual
const isArrayEqual = (arr1, arr2) => {
  if (arr1.length !== arr2.length) return false;
  for (let i = 0; i < arr1.length; i++) {
    if (JSON.stringify(arr1[i]) !== JSON.stringify(arr2[i])) return false;
  }
  return true;
};

// 在setCompanies前判断
if (!isArrayEqual(companies, response.data.companies)) {
    setCompanies(response.data.companies);
}

4. 父组件频繁触发该组件渲染 #

检查父组件是否有频繁更新的状态，导致当前组件反复挂载或重新渲染。

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