是否有可能更新对象的属性与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'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
在更新对象的情况下,键是字符串
例如,你的状态对象是
serviceDays: {
Sunday: true,
Monday: true,
Tuesday: false,
Wednesday: true,
Thurday: false,
Friday: true,
Saturday: true
}
所以你可以通过以下方式更新
const onDayClick = day => {
const { serviceDays } = this.state
this.setState(prevState => ({
serviceDays: {
...prevState.serviceDays,
[day]: serviceDays[day] ? false : true
}
}))
}
其他回答
同样,按照Alberto Piras解决方案,如果你不想复制所有的“state”对象:
handleChange(el) {
let inputName = el.target.name;
let inputValue = el.target.value;
let jasperCopy = Object.assign({}, this.state.jasper);
jasperCopy[inputName].name = inputValue;
this.setState({jasper: jasperCopy});
}
你可以试试这个:
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}
/>
不使用异步和等待使用此…
funCall(){
this.setState({...this.state.jasper, name: 'someothername'});
}
如果你使用异步和等待使用这个…
async funCall(){
await this.setState({...this.state.jasper, name: 'someothername'});
}
这里使用展开运算符和一些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}))