功能组件的state中的object如何添加键值对

Question

我已经看到一些关于 class 组件的计算属性名称的内容，功能组件是否有类似的解决方案？

我有 {} 的初始 state。

const [choice, setChoice] = useState({})

当点击一个按钮时，我想动态地添加一个新的 k:v。

onClick={()=>{ 
setChoice( props.choice[Key]=[Val] );
}

这似乎不起作用...

我希望添加到选择变量中，像这样：{"key":"val","key1":"val1",etc..)

我也试过这个：

class Choice {
    constructor(key, value){
      this.key = key,
      this.value = value
    }
  }

但不确定如何为它调整 onClick。

Answer 1

问题来自您在 onClick function 中choice的访问器。好的语法应该是（因为选择可以直接作为组件中的变量访问）

onClick={()=>{ 
setChoice( { ...choice, key:val } ); 
}

1. choice是 state 变量，因此可以通过其名称直接访问。 无需使用 props.choice 链接到您的组件道具

2. setChoice 应该将原始变量加上新的键/值对作为参数。 于是解构了...choice 和添加的成员变量key:value。

编辑：如果你想让你的更新以 React 的方式更合理，你应该使用回调语法。 最后你会有

setChoice(choice => { return {...choice, key:val}})

这防止了一些小问题，来自 React 中 state 更新的异步性质。

Answer 2

向当前 state 添加一个新的键值对：

onClick={() => {
    setChoice( currentState => {
        return {...currentState, Key:Val}
        }
}}

集合 state 上的处理程序具有此重载，让您可以使用之前的 state 并添加到其中。