是否有可能更新对象的属性与setState?
喜欢的东西:
this.state = {
jasper: { name: 'jasper', age: 28 },
}
我试过:
this.setState({jasper.name: 'someOtherName'});
这:
this.setState({jasper: {name: 'someothername'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
是否有可能更新对象的属性与setState?
喜欢的东西:
this.state = {
jasper: { name: 'jasper', age: 28 },
}
我试过:
this.setState({jasper.name: 'someOtherName'});
这:
this.setState({jasper: {name: 'someothername'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
我知道这里有很多答案,但我很惊讶他们没有一个在setState之外创建一个新对象的副本,然后简单地setState({newObject})。干净、简洁、可靠。在这种情况下:
Const jasper ={…this.state。贾斯珀,名字:“另一个名字”} this.setState(() => ({jasper}))
或者动态属性(对表单非常有用)
Const jasper ={…this.state。jasper, [VarRepresentingPropertyName]: 'new value'} this.setState(() => ({jasper}))
其他回答
我用了这个方法。
如果你有一个这样的嵌套状态:
this.state = {
formInputs:{
friendName:{
value:'',
isValid:false,
errorMsg:''
},
friendEmail:{
value:'',
isValid:false,
errorMsg:''
}
}
}
你可以声明handleChange函数来复制当前状态并重新赋值
handleChange(el) {
let inputName = el.target.name;
let inputValue = el.target.value;
let statusCopy = Object.assign({}, this.state);
statusCopy.formInputs[inputName].value = inputValue;
this.setState(statusCopy);
}
这里是带有事件侦听器的HTML。确保使用与状态对象相同的名称(在本例中为'friendName')
<input type="text" onChange={this.handleChange} " name="friendName" />
这是另一个使用immer immutabe实用程序的解决方案,非常适合于深度嵌套的对象,并且您不应该关心突变
this.setState(
produce(draft => {
draft.jasper.name = 'someothername'
})
)
使用钩子,我们可以做到以下方式
const [student, setStudent] = React.useState({name: 'jasper', age: 28});
setStudent((prevState) => ({
...prevState,
name: 'newName',
}));
这里使用展开运算符和一些ES6
this.setState({
jasper: {
...this.state.jasper,
name: 'something'
}
})
我知道这里有很多答案,但我很惊讶他们没有一个在setState之外创建一个新对象的副本,然后简单地setState({newObject})。干净、简洁、可靠。在这种情况下:
Const jasper ={…this.state。贾斯珀,名字:“另一个名字”} this.setState(() => ({jasper}))
或者动态属性(对表单非常有用)
Const jasper ={…this.state。jasper, [VarRepresentingPropertyName]: 'new value'} this.setState(() => ({jasper}))