React循环内用动态key调用useState无法更新状态问题

问题根源 #

1. setState的异步与闭包特性：循环中多次调用setAddressState时，每次都基于调用confirmChangeAddress时捕获的旧addressState扩展对象，导致每次更新都是独立覆盖旧状态，最终只有循环最后一次的更新会生效，前面的变更都会被冲掉。
2. 临时数据存储问题：如果newAddress是组件内的普通变量，组件每次重新渲染时该变量会被重置，可能导致输入数据丢失，应该用useRef持久化存储临时对象。

修复步骤 #

1. 用useRef存储临时输入数据 #

替换普通变量为useRef，确保跨渲染周期保留数据：

import { useState, useRef } from 'react';

// ...

const newAddressRef = useRef({});

2. 修改输入变更处理逻辑 #

操作ref的current属性存储输入值：

const inputChangeHandler = (ev) => {
  const { name, value } = ev.target;    
  newAddressRef.current[name] = value;
}

3. 一次性合并更新状态 #

无需循环调用setAddressState，直接将临时数据与旧状态合并，一次完成更新：

const confirmChangeAddress = (ev) => {
  console.log("CONFERMA CAMBIO");    
  setAddressState(prevState => ({
    ...prevState,
    ...newAddressRef.current
  }));
  // 可选：更新后清空临时存储
  newAddressRef.current = {};
}

原写法失效的核心原因 #

假设newAddress包含first_name和last_name两个字段：

• 第一次循环：setAddressState({...旧状态, first_name: 新值})
• 第二次循环：setAddressState({...旧状态, last_name: 新值})
  两次更新都基于同一个旧状态，最终只会保留最后一次的last_name变更，first_name的更新被覆盖。而一次性合并整个newAddress对象，能确保所有变更同时生效。

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