React中useState对象动态更新状态失败问题求助

错误根源 #

你更新generalInfo状态时，错误地把当前状态对应的值当成了对象键，而非传入的iName。比如iName为name时，generalInfo[${iName}]取到的是当前name的属性值（比如初始的"a"），这会导致你给对象新增了一个键为"a"的属性，而非更新name本身。

正确写法 #

方式1：用计算属性名直接更新

function displayInfo(e,iName) {
  setGeneralInfo({
    ...generalInfo,
    [iName]: e.target.value // 用iName作为动态键，这是ES6计算属性名语法
  });
}

方式2：函数式更新（更推荐）

当状态更新依赖前一次状态时，函数式更新能避免闭包导致的旧状态捕获问题，确保基于最新状态修改：

function displayInfo(e,iName) {
  setGeneralInfo(prevState => ({
    ...prevState,
    [iName]: e.target.value
  }));
}

额外说明 #

• 计算属性名[变量名]是ES6特性，刚好适配你根据inputName动态更新对应属性的场景。
• 函数式更新中，React会自动传入最新的状态prevState，能有效避免频繁更新或异步场景下的状态异常。

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