React函数式组件state中的对象如何动态添加键值对？

函数式组件完全支持计算属性名实现动态新增对象键值对，无需额外定义类。

原有代码不生效的原因 #

• React的state要求不可变修改，不能直接对原state对象赋值，你的写法props.choice[Key]=[Val]直接修改了对象，且给setChoice传入的是赋值操作的返回值（即Val本身），而非新的完整对象，因此state更新不符合预期。
• 你要修改的是当前组件内部声明的choice state，而非props中的choice属性，直接操作props中的值也不符合React单向数据流规则。
• 你定义的Choice类不符合你期望的平层键值对结构，使用该类实例得到的是{key: xxx, value: xxx}的嵌套结构，和你需要的{"key1":"val1","key2":"val2"}结构不匹配，无需引入额外类定义。

正确实现写法 #

直接使用函数式更新+计算属性名+展开运算符即可实现需求：

onClick={() => {
  // 传入函数式更新保证拿到最新的state值，避免闭包导致的旧值问题
  setChoice(prevChoice => ({
    // 展开原有对象保留已有键值对
    ...prevChoice,
    // 计算属性名，动态将Key变量的值作为新键
    [Key]: Val
  }))
}}

效果说明 #

每次触发点击事件时，都会在原有choice对象的基础上新增/覆盖对应键值对，最终得到你需要的平层键值对结构。

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