React如何在动态属性对象中保存状态避免未更新字段被覆盖

你的代码有两个会导致状态异常的核心问题：

• 直接对原inputs state对象做属性赋值，违反React 状态不可变 原则，且最终返回的还是原对象引用，React会判定状态未更新，无法精准追踪状态变更，会触发非预期的渲染行为
• setInputs的更新回调没有使用最新的前序状态，直接引用闭包捕获的过期inputs变量，更新时会丢失其他未触发变更的字段数据

只需要修改addInput方法即可，逻辑天然兼容「不存在对应属性则新建、存在则覆盖」的需求：

const [inputs, setInputs] = useState({})

const addInput = (name, value, type) => {
  // setState回调的参数prev是当前最新的状态快照，不存在闭包过期问题
  setInputs(prev => ({
    // 先展开所有旧状态字段，完整保留其他输入项的已有数据
    ...prev,
    // 用计算属性名动态设置当前输入项的key，有旧值就覆盖，没有就新增
    [name]: {
      value,
      type
    }
  }))
}

// 事件处理逻辑
const handleInput = (event) => {
  // 如果你使用的name确实来自props，保留props.name即可，直接取event.target.name适配性更强
  addInput(event.target.name, event.target.value, event.target.type)
  // 其余原有业务逻辑保留即可
}

• 每次状态更新都会返回一个全新的对象，完全符合状态不可变要求，React可以正常检测到变更触发重渲染
• 无需额外写判断逻辑检查name属性是否存在：对象展开后同名属性会自动被后面的新值覆盖，不存在的属性会直接新增
• 完全规避闭包导致的状态过期问题，不需要额外依赖useRef等API存储状态

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