React代码修改state后持续重渲染，新增图片无报错无限重渲染如何解决？

• 核心死循环诱因：处理iconEN文件读取的逻辑直接写在组件顶层渲染流程中，没有包裹在副作用钩子内。只要iconEN不为空，每次组件渲染都会触发FileReader执行，读取完成后调用setCurrentEnImg、setAdData两个更新状态的方法，触发组件再次重渲染，重渲染后又会命中if (iconEN)判断重复执行上述逻辑，形成无限重渲染闭环。
• 潜在状态更新错误：setAdData直接使用当前闭包中的adData做扩展，没有使用函数式更新，当短时间内多次触发状态更新时，会出现旧状态覆盖新状态的问题。

1. 将文件读取逻辑移入useEffect钩子，仅在iconEN发生变化时执行读取逻辑
2. 状态更新依赖旧状态时，使用函数式写法获取最新的状态值
3. 可根据业务需求选择在读取完成后重置iconEN，进一步避免重复执行

修复后代码示例：

import { useState, useEffect } from 'react';

// ...其他组件逻辑
const [adData, setAdData] = useState({
  name: "",
  link: "",
  fromDate: {},
  toDate: {},
  fromTime: {},
  toTime: {},
  iconEn: null,
  allViews: 0,
  userViews: 0,
});
const [iconEN, setIconEN] = useState(null);
const [currentEnImg, setCurrentEnImg] = useState(null);

const handleOnChange = (e) => {
  // 函数式更新获取最新adData
  setAdData(prev => ({ ...prev, [e.target.name]: e.target.value }));
};

const handleOnCheck = (e) => {
  // 函数式更新获取最新adData
  setAdData(prev => ({ ...prev, [e.target.name]: e.target.checked }));
};

// 把文件读取逻辑放到useEffect中，依赖为iconEN
useEffect(() => {
  if (!iconEN) return;
  const reader = new FileReader();
  reader.onload = () => {
    setCurrentEnImg(reader.result);
    // 函数式更新获取最新adData
    setAdData(prev => ({ ...prev, iconEn: iconEN }));
    // 如果不需要保留iconEN状态，读取完成后可以置空
    // setIconEN(null);
  };
  reader.readAsDataURL(iconEN);
}, [iconEN]);

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