我试图通过使用这样的嵌套属性来组织我的状态:
this.state = {
someProperty: {
flag:true
}
}
但是像这样更新状态，
this.setState({ someProperty.flag: false });
是行不通的。怎样才能正确地做到这一点呢?
当前回答
你应该把new state传递给setState。 新状态的引用必须与旧状态的引用不同。
所以试试这个:
this.setState({
...this.state,
someProperty: {...this.state.someProperty, flag: true},
})
其他回答
setInputState((pre)=> ({...pre,[parentKey]: {...pre[parentKey], [childKey]: value}}));
我喜欢这个
这是第一个答案的变体，不需要任何额外的包、库或特殊函数。
state = {
someProperty: {
flag: 'string'
}
}
handleChange = (value) => {
const newState = {...this.state.someProperty, flag: value}
this.setState({ someProperty: newState })
}
为了设置特定嵌套字段的状态，您已经设置了整个对象。为此，我创建了一个变量newState，并首先使用ES2015扩展操作符将当前状态的内容扩散到该变量中。然后，我用新值替换了this.state.flag的值(因为我在将当前状态扩展到对象后设置了flag: value，所以当前状态下的flag字段将被覆盖)。然后，我简单地将someProperty的状态设置为newState对象。
如果你正在使用ES2015，你可以访问Object.assign。您可以使用它来更新嵌套对象。
this.setState({
someProperty: Object.assign({}, this.state.someProperty, {flag: false})
});
您将更新的属性与现有属性合并，并使用返回的对象更新状态。
编辑:将一个空对象作为目标添加到赋值函数中，以确保状态不会像carkod指出的那样直接发生突变。
stateUpdate = () => {
let obj = this.state;
if(this.props.v12_data.values.email) {
obj.obj_v12.Customer.EmailAddress = this.props.v12_data.values.email
}
this.setState(obj)
}
根据框架的标准，不确定这在技术上是否正确，但有时您只是需要更新嵌套对象。这是我使用钩子的解决方案。
setInputState ({ ... inputState, [括号]:内务部[括号]，[childKey]: });
