更新嵌套的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