是否有可能更新对象的属性与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'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
另一种选择:用Jasper对象定义变量,然后调用一个变量。
扩展操作符:ES6
this.state = { jasper: { name: 'jasper', age: 28 } }
let foo = "something that needs to be saved into state"
this.setState(prevState => ({
jasper: {
...jasper.entity,
foo
}
})
其他回答
这里使用展开运算符和一些ES6
this.setState({
jasper: {
...this.state.jasper,
name: 'something'
}
})
你可以试试这个: (注:输入标签的名称===对象字段)
<input name="myField" type="text"
value={this.state.myObject.myField}
onChange={this.handleChangeInpForm}>
</input>
-----------------------------------------------------------
handleChangeInpForm = (e) => {
let newObject = this.state.myObject;
newObject[e.target.name] = e.target.value;
this.setState({
myObject: newObject
})
}
你的第二种方法不起作用,因为{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')})
你可以试试这个:
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState.name = 'someOtherName';
return {jasper: prevState}
})
或其他财产:
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState.age = 'someOtherAge';
return {jasper: prevState}
})
或者你可以使用handleChage函数:
handleChage(event) {
const {name, value} = event.target;
this.setState(prevState => {
prevState = JSON.parse(JSON.stringify(this.state.jasper));
prevState[name] = value;
return {jasper: prevState}
})
}
和HTML代码:
<input
type={"text"}
name={"name"}
value={this.state.jasper.name}
onChange={this.handleChange}
/>
<br/>
<input
type={"text"}
name={"age"}
value={this.state.jasper.age}
onChange={this.handleChange}
/>
试试这个,应该没问题
this.setState(Object.assign(this.state.jasper,{name:'someOtherName'}));