我试图通过使用这样的嵌套属性来组织我的状态:
this.state = {
someProperty: {
flag:true
}
}
但是像这样更新状态,
this.setState({ someProperty.flag: false });
是行不通的。怎样才能正确地做到这一点呢?
我试图通过使用这样的嵌套属性来组织我的状态:
this.state = {
someProperty: {
flag:true
}
}
但是像这样更新状态,
this.setState({ someProperty.flag: false });
是行不通的。怎样才能正确地做到这一点呢?
当前回答
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)
}
其他回答
const newState = Object.assign({}, this.state);
newState.property.nestedProperty = "new value";
this.setState(newState);
创建一个状态的副本:
let someProperty = JSON.parse(JSON.stringify(this.state.someProperty))
对该对象进行更改:
someProperty.flag = "false"
现在更新状态
this.setState({someProperty})
虽然你问的是基于类的React组件的状态,但useState钩子也存在同样的问题。更糟糕的是:useState钩子不接受部分更新。所以当useState钩子被引入时,这个问题就变得非常相关了。
我决定发布以下答案,以确保这个问题涵盖了使用useState钩子的更现代的场景:
如果你有:
const [state, setState] = useState({
someProperty: {
flag: true,
otherNestedProp: 1
},
otherProp: 2
})
你可以通过克隆当前数据并修补所需的数据段来设置嵌套属性,例如:
setState(current => { ...current,
someProperty: { ...current.someProperty,
flag: false
}
});
或者您可以使用Immer库来简化对象的克隆和修补。
或者你可以使用Hookstate库(免责声明:我是一名作家)来简单地管理复杂的(本地和全局)状态数据,并提高性能(阅读:不用担心渲染优化):
import { useHookstate } from '@hookstate/core'
const state = useHookstate({
someProperty: {
flag: true,
otherNestedProp: 1
},
otherProp: 2
})
获取要渲染的字段:
state.someProperty.flag.get()
// or
state.get().someProperty.flag
设置嵌套字段:
state.someProperty.flag.set(false)
下面是Hookstate示例,其中的状态被深度递归嵌套在树状数据结构中。
对于在2022年读书的人来说:
constructor(props) {
super(props);
this.state = {
someProperty: {
flag: true
}
otherValues: '',
errors: {}
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
const someProperty = { ...this.state.someProperty };
someProperty[name] = value;
this.setState({
someProperty: someProperty
});
}
.......
把它写在一行里
this.setState({ someProperty: { ...this.state.someProperty, flag: false} });