是否有可能更新对象的属性与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'}})
第一个会导致语法错误,第二个则什么都不做。什么好主意吗?
当前回答
舰队指挥官:样品
const [formData, setformData] = useState({
project_admin_permissions: {
task_forms: false,
auto_assign_rules: false,
project_notes: true,
alerts: false,
update_criteria: true,
project_flow: false,
reports: false,
}
})
const handleChangeCheckBox = (e) => {
setformData({
...formData, project_admin_permissions: { ...formData.project_admin_permissions, [e.target.name]: e.target.checked }
})
}
其他回答
这是最快和最易读的方式:
this.setState({...this.state.jasper, name: 'someothername'});
即使this.state.jasper已经包含了name属性,也会使用新名称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')})
在更新对象的情况下,键是字符串
例如,你的状态对象是
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
}
}))
}
第一种情况确实是语法错误。
因为我看不到组件的其余部分,所以很难理解为什么要在这里的状态中嵌套对象。在组件状态下嵌套对象不是一个好主意。尝试将初始状态设置为:
this.state = {
name: 'jasper',
age: 28
}
这样,如果你想要更新名称,你可以调用:
this.setState({
name: 'Sean'
});
这能达到你的目标吗?
对于更大、更复杂的数据存储,我会使用Redux之类的东西。但这要高级得多。
关于组件状态的一般规则是只使用它来管理组件的UI状态(例如,活动,计时器等)。
看看这些参考资料:
https://facebook.github.io/react/docs/react-component.html#state https://facebook.github.io/react/docs/state-and-lifecycle.html
试试这个:
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