更新嵌套的setState对象 - ReactJS

Question

this.state = {
    qs: {catName:'',subCatName:''}
}

我有上面的嵌套状态对象。为了setState，我在componentDidUpdate中使用了以下代码。

var newQs = {...this.state.qs}
newQs.catName = 'name';
this.setState({qs: newQs});

但是它不起作用，仍然this.state.qs为空未更新。我甚至试过以下一个。

this.setState({...this.state, qs: {
    ...this.state.qs,
    catName: 'name'
}});

仍然无效。

Answer 1

像这样使用setState：

this.setState( prevState =>
    ( { qs: { ...prevState.qs, catName: 'name' } } )
)

此处...this.state不需要，因为React会合并您所在州的其他部分。

我也根据@ kuby的评论编辑了我的建议。 React现在建议使用带有prevState的函数，而不是直接设置状态。这是因为状态更新可能是异步的。因此，使用函数是一种更好的方法。如果我们不使用并不意味着总是存在问题的功能，但可能存在并且安全方面始终是更好的方法。

相关文档：https://reactjs.org/docs/state-and-lifecycle.html