不要直接修改 State

state數據不能直接修改，必須要通過setState來修改。但是設置值的時候不能影響到之前state的值，舉個栗子：

// 處理數組，不會改變原有數組 this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item => item > 100), // 篩選// 其他操作，要先用比如const list5Copy = this.state.list5.slice()生成一個副本，然后再對副本做操作list5: list5Copy })// 處理對象，不會改變原有對象 this.setState({obj1: Object.assign({}, this.state.obj1, {a: 100}),obj2: {...this.state.obj2, a: 100} })

處理數組時不要使用push pop splice等方式，處理對象時不要直接對this.state.obj進行屬性設置，因為這樣違反不要直接修改state原則。

setState更新可能是同步也可能是異步

出于性能考慮，React 可能會把多個 setState() 調用合并成一個調用。比如如下情況：

// 傳入對象，會被合并。雖然3次setState, 但count值最后只會加1 this.setState({counter: this.state.counter + 1 }) this.setState({counter: this.state.counter + 1 }) this.setState({counter: this.state.counter + 1 })

此時this.state的更新就是異步更新了。那么有沒有辦法控制讓其同步更新呢？要解決這個問題，可以讓 setState() 接收一個函數而不是一個對象。這個函數用上一個 state 作為第一個參數，將此次更新被應用時的 props 做為第二個參數：

// 大括號包裹的箭頭函數寫return this.setState((preState, props) => {return {counter: preState.counter + 1} }) // 小括號包裹的箭頭函數不用寫return this.setState((preState, props) => ({counter: preState.counter + 1 })) // 普通函數形式 this.setState(function(preState, props) {return {counter: preState.counter + 1} })

這樣的話，this.state就可以保持同步更能，最后顯示的counter值是3而不是1了。

State 的更新會被合并

在講setState更新可能是同步也可能是異步的時候已經講啦。

參考資料

[1] 正確地使用 State

總結

以上是生活随笔為你收集整理的React中使用setState的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。