如何在React useState中使用变量作为属性名更新对象属性？

问题原因 #

你第二种写法错误是因为...fee[field1] = val的执行逻辑不符合预期：

• 先执行赋值操作fee[field1] = val，该表达式的返回值是你传入的val本身（通常是字符串类型）
• 对字符串使用展开运算符...时，会将字符串按字符拆分，以字符索引为键生成属性，这就是你额外出现0、1等数字属性的原因。

正确实现方案 #

使用JS的计算属性名语法，把变量属性名用方括号[]包裹即可：

基础写法 #

// 用field1作为属性名更新
onChangeText={(val) => setFee({...fee, [field1]: val})}
// 用field2作为属性名更新
onChangeText={(val) => setFee({...fee, [field2]: val})}

更稳妥的函数式更新写法 #

如果更新操作依赖之前的state值，建议使用函数式更新避免闭包导致的旧state问题：

onChangeText={(val) => setFee(prev => ({...prev, [field1]: val}))}

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