React中在handleChange外更新state对象字段失败求助

错误原因 #

你在handleAnotherFunction里的状态更新写法有误：

SetValues({ ...values, [values.countryId]: 130 });

这里的[values.countryId]是把当前countryId的值作为对象的键，而不是你要更新的字段名countryId。比如如果当前values.countryId是空字符串，你实际上是在添加一个键为""、值为130的属性，根本没修改到countryId字段。

正确写法 #

方式1：直接指定字段名

直接明确写要更新的字段名countryId：

const handleAnotherFunction = async (event) => {
  SetValues({ ...values, countryId: 130 });
};

方式2：函数式更新（推荐用于异步场景）

因为useState的更新可能是异步的，如果你在异步操作后更新状态，最好用函数式更新来获取最新的state值，避免依赖旧的state快照：

const handleAnotherFunction = async (event) => {
  // 假设这里有异步操作，比如await fetch(...)
  SetValues(prevValues => ({ ...prevValues, countryId: 130 }));
};

额外说明 #

如果需要动态指定要更新的字段（比如有时候要根据变量决定更新哪个字段），应该用字段名字符串作为键，比如：

const fieldToUpdate = "countryId";
SetValues({ ...values, [fieldToUpdate]: 130 });

这里的[fieldToUpdate]才是正确的动态键名写法，因为fieldToUpdate的值是字符串"countryId"。

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