如何向处于功能组件状态的对象添加键值对

Question

我看过一些关于类组件的计算属性名称的东西，是否有类似的功能组件解决方案?

我的初始状态是{}。

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

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

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

这似乎不工作…

，我希望添加到选择变量，像这样:{"key"; " value "; "key1"; "val1"，等等)

我也试过这个:

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

但不确定如何调整它的onClick

Answer 1

问题来自您在onClick函数中的choice访问器。好的语法应该是(因为choice可以作为组件中的变量直接访问)

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

1. choice是状态变量，因此可以通过其名称直接访问。无需使用props.choice

   链接到组件props

2. setChoice应该将原始变量加上新的键/值对作为参数。因此……的破坏。选择和添加的成员变量key:value.

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

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

这防止了一些来自React中状态更新的异步特性的篡改。

Answer 2

向当前状态添加一个新的键值对:

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

set state的处理程序有这个重载，可以让你使用之前的状态并添加到它。