如何更改状态中嵌套对象的属性？答案

【问题标题】：How do i change property of nested object in State?如何更改状态中嵌套对象的属性？
【发布时间】：2019-12-14 01:04:00
【问题描述】：

例如，状态看起来像这样

{
  ownRecipe: {name:""}
}

现在我需要更改名称属性，这不起作用

this.setState({ownRecipe[name]:"Pineapple pizza"});

这行得通，但也许有更好的方法？

let ownRecipeCopy = {}
for(let key in this.state.ownRecipe){
  ownRecipeCopy[key] = this.state.ownRecipe[key];
}
ownRecipeCopy.name = e.target.value;
this.setState({ownRecipe: ownRecipeCopy});

编辑：感谢大家的回答

【问题讨论】：

标签： javascript reactjs object ecmascript-6

【解决方案1】：

传播原始对象并更改您想要的属性：

this.setState(prevState =>({
    ownRecipe : {
        ...prevState.ownRecipe,
        name : 'new name'
    }
}));

【讨论】：

由于 setState 的异步特性，不建议使用this.state 来获取setState 中的先前状态。相反，在使用之前的状态值更新状态时，始终依赖于传递回调 this.setState(prevState => ({ownRecipe : ... }))。更新函数接收到的 prevState 保证是最新的。更新器的输出与 prevState 浅合并。见react-setstate-usage和setState
真的。固定的！谢谢
另见setState is asynchronous
只有你必须把 ...prevState.ownRecipe 代替，否则它会将整个状态的副本放入 ownRecipe 对象中。

【解决方案2】：

像这样访问属性：

this.setState(prevState => ({ ...prevState, ownRecipe: { ...prevState.ownRecipe, name: "Pineapple pizza" }});

传播会保存对象以前的内容，因此您不会丢失任何其他信息。你也可以这样做：

this.setState({ ...this.state, ownRecipe: { ...this.state.ownRecipe, name: "Pineapple pizza" }});

但是，如果您有很多属性，这将变得乏味。

【讨论】：

第一个...prevState不是必须的，react会帮你合并对象，this.setState(prevState => ({ ownRecipe: { ...prevState.ownRecipe, name: "Pineapple pizza" }});