useEffect内修改状态触发无限循环问题求助

问题根源 #

你遇到的无限循环，核心原因是依赖项的引用不稳定，而非isSaving/saveMessage状态本身。尽管这两个状态不在useEffect依赖列表中，但它们的更新会触发组件重渲染；而如果rows、passengers或onSubmit每次重渲染时都是新的引用（比如未缓存的数组、对象或函数），useEffect会被反复触发，进而再次更新状态，形成循环链。

具体排查与修复步骤 #

1. 检查rows和passengers的引用稳定性
   如果这两个数据是来自父组件的未缓存数组/对象（比如直接在父组件中用const rows = [...]定义，或未通过useMemo处理），每次父组件重渲染时都会生成新的引用——哪怕内容完全没变，React的依赖比较也会判定为“变化”，触发useEffect执行。
   修复方式：用useMemo缓存这两个数据，仅当它们的实际内容变化时更新引用：

   // 父组件中
   const memoizedRows = useMemo(() => rows, [/* rows的原始依赖项，比如数据源id、修改时间等 */]);
   const memoizedPassengers = useMemo(() => passengers, [/* passengers的原始依赖项 */]);
   

2. 确保onSubmit函数的引用稳定
   如果onSubmit是在父组件中定义的普通函数，每次重渲染时都会创建新的函数实例，同样会触发useEffect。
   修复方式：用useCallback缓存提交函数，仅当它的依赖项变化时更新：

   // 父组件中
   const memoizedOnSubmit = useCallback(async () => {
     // 你的表单提交逻辑
     await fetch('/api/save', {
       method: 'POST',
       body: JSON.stringify({ rows, passengers })
     });
   }, [memoizedRows, memoizedPassengers]); // 依赖缓存后的rows/passengers
   

3. 优化自定义Hook的逻辑
   将缓存后的memoizedRows、memoizedPassengers和memoizedOnSubmit传入你的自定义Hook，此时useEffect只会在实际数据或提交逻辑变化时触发，不会因为无关重渲染进入循环：

   function useAutoSave({ rows, passengers, onSubmit }) {
     const [isSaving, setIsSaving] = useState(false);
     const [saveMessage, setSaveMessage] = useState('');
   
     useEffect(() => {
       const autoSave = async () => {
         setIsSaving(true);
         try {
           await onSubmit();
           setSaveMessage('保存成功');
         } catch (err) {
           setSaveMessage('保存失败');
         } finally {
           setIsSaving(false);
         }
       };
   
       // 可添加防抖避免频繁触发（可选优化）
       const timer = setTimeout(autoSave, 500);
       return () => clearTimeout(timer);
     }, [rows, passengers, onSubmit]); // 此时依赖项引用稳定
   
     return { isSaving, saveMessage };
   }
   

关键提示 #

React的useEffect依赖比较是引用比较，而非值比较。对于对象、数组、函数这类引用类型，必须通过useMemo/useCallback确保它们的引用仅在必要时更新，才能避免不必要的useEffect触发和循环问题。

内容的提问来源于stack exchange，提问作者Federico Perez Diduch