React useEffect监听state计数器跳变 回调未逐次触发问题排查

• 状态更新触发时机违反React渲染规则：generateAdditiveFormKeys是在组件渲染阶段同步执行的，循环中多次调用addSection本质是在渲染过程中连续触发setState。React对同优先级更新会做自动批处理，两次+1的更新会被直接合并，计数器从0跳到2，不会经过值为1的中间状态，依赖计数器变化的useEffect自然只会触发1次。渲染阶段触发setState本身就是官方明确不推荐的反模式，极易引发更新合并、重复渲染等不可预期问题。
• 闭包陈旧值导致重复触发更新：forEach循环中读取的subjectAddressCounter是当前渲染闭包内固定的初始值0，两次循环判断时拿到的都是0，因此会连续触发两次addSection，根本等不到第一次setState生效更新计数器值。
• 上一轮值比对逻辑完全写反：useRef存储上一次状态的正确逻辑是「先比较旧值和新值，再把ref更新为新值供下一轮使用」，你的代码是进入effect第一行就把ref值覆盖为最新的计数器值，后续比对时ref值和当前计数器值完全相等，现有逻辑能触发一次新增纯粹是初始挂载时ref保留了初始值0的巧合。
• 如果是React 18开发环境开启严格模式，组件初始化会双执行渲染，会进一步放大重复调用的问题。

完全不需要用「计数器+ref比对+useEffect中转调用增删方法」的绕弯模式，计数器本身就是区块数量的派生值，根本不需要单独存储。直接把表单区块列表作为state存储，增删操作直接操作数组状态，初始化时直接把后端返回的地址数据填入初始state即可，彻底去掉冗余的三层中转逻辑：

const FormGroup = ({ reportResponse }) => {
  // 初始化直接生成地址区块状态，不需要后续渲染阶段补触发setState
  const [subjectAddressSections, setSubjectAddressSections] = useState(() => {
    const addresses = reportResponse?.entity_addresses_encrypted || [];
    // 至少保留1个空的默认区块
    return addresses.length > 0 ? addresses : [{}];
  });

  // 新增区块
  const addSection = () => {
    setSubjectAddressSections(prev => [...prev, {
      address: '',
      city: '',
      state: '',
      zip: '',
      country: ''
    }]);
  };

  // 删除区块（强制至少保留1个默认区块）
  const removeSection = (targetIndex) => {
    setSubjectAddressSections(prev => {
      if (prev.length <= 1) return prev;
      return prev.filter((_, index) => index !== targetIndex);
    });
  };

  // 更新指定区块的字段值
  const updateField = (sectionIndex, field, value) => {
    setSubjectAddressSections(prev => prev.map((section, index) => 
      index === sectionIndex ? { ...section, [field]: value } : section
    ));
  };

  return (
    <div className="form-container">
      {subjectAddressSections.map((section, index) => (
        <div key={index} className="address-block">
          {/* 表单字段直接绑定值和更新方法，索引直接用来拼接字段名 */}
          <input
            value={section.address || ''}
            onChange={e => updateField(index, 'address', e.target.value)}
            name={`question_11_address${index === 0 ? '' : `_copy_${index}`}`}
          />
          <input
            value={section.city || ''}
            onChange={e => updateField(index, 'city', e.target.value)}
            name={`question_12_city${index === 0 ? '' : `_copy_${index}`}`}
          />
          {/* 州、邮编、国家字段逻辑和上面一致 */}
          {index > 0 && <button onClick={() => removeSection(index)}>删除该地址</button>}
        </div>
      ))}
      <button onClick={addSection}>新增地址</button>
    </div>
  );
};

这个实现没有隐式的effect依赖、不存在状态合并或闭包问题，初始化时直接生成正确的区块状态，不需要额外补增操作；原来需要靠计数器拼接的字段prop名，直接用数组索引就能生成，逻辑链路更短，调试成本更低。

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