reactjs - 更新嵌套的 setState 对象 - ReactJS

Question

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

我有上面的嵌套状态对象。为了设置State，我在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