是否有可能更新对象的属性与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'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
不使用异步和等待使用此…
funCall(){
this.setState({...this.state.jasper, name: 'someothername'});
}
如果你使用异步和等待使用这个…
async funCall(){
await this.setState({...this.state.jasper, name: 'someothername'});
}
其他回答
这个设置对我来说很管用:
let newState = this.state.jasper;
newState.name = 'someOtherName';
this.setState({newState: newState});
console.log(this.state.jasper.name); //someOtherName
你的第二种方法不起作用,因为{name: 'someothername'}等于{name: 'someothername',年龄:undefined},所以undefined会覆盖原始的年龄值。
当涉及到改变嵌套对象的状态时,一个很好的方法是Immutable.js
this.state = {
jasper: Record({name: 'jasper', age: 28})
}
const {jasper} = this.state
this.setState({jasper: jasper.set(name, 'someothername')})
试试这个:
const { jasper } = this.state; //Gets the object from state
jasper.name = 'A new name'; //do whatever you want with the object
this.setState({jasper}); //Replace the object in state
我用了这个方法。
如果你有一个这样的嵌套状态:
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" />
试试这个,应该没问题
this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));