根據當前狀態反應setState

Question

我想知道如果我想根據當前狀態更新狀態，使用哪種形式的setState 。

React的setState將對象或函數作為參數。 據我了解，以下內容無法正常工作，因為React批量setState

state = {score : 0};

increaseScoreBy2 () {
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
}

而且最好使用

increaseScoreBy2 () {
 this.setState(prevState => { return { score: prevState.score + 2 }}});
}

但是如果我想要做的就是一次更新狀態，應該使用哪種形式的setState ？ 這是個人偏好的問題嗎？ 或者我們是否應該在根據當前狀態更新狀態時始終使用函數形式以避免任何可能的意外行為？

例如，以下代碼有什么問題嗎？

const newRegions = this.state.regions.map(...)
this.setState({ regions: newRegions });

Answer 1

如你所說，是的，一般的經驗法則是“ 如果下一個狀態依賴於先前的狀態，則使用更新程序功能 。”

[ this.setState({ regions: this.state.regions.map(...) }) ]有什么問題嗎？

我認為這取決於regions數組中的內容以及傳遞給map() 。 也許回答這個問題的最好方法是問問自己批量更新是否會導致問題：

const mapFcn = ...
const newState = Object.assign(
  {},
  { regions: this.state.regions.map(mapFcn) },
  { regions: this.state.regions.map(mapFcn) },
);

在某些情況下，這可能不是問題。 如果每個區域都是一個字符串， mapFcn = (region) => region.toUpperCase()可能不會導致任何問題。

如果regions是一個對象數組， mapFcn就像“經典”增量示例（ (region) => ({ ...region, count: region.count + 1 }) ），這可能是個問題。

Answer 2

狀態需要一些時間來更新，並且在設置狀態后立即對狀態執行操作不是一個好習慣。 這使得在調用setState（）之后立即讀取this.state是一個潛在的陷阱。 如果需要，可以使用成功更新狀態后調用的回調函數。 以下是文檔的鏈接： https ： //reactjs.org/docs/react-component.html#setstate

Answer 3

如果更新沒有沖突，則使用對象更新程序多次調用setState 沒有任何問題 ：

// works
setState({score: this.state.score + 1})
setState({players: [...this.state.players, 'Jack']})

如果更新有沖突，則不應從this.state獲取先前的狀態，而是setState將在函數更新程序中提供給您：

// works
setState((prevState)=> ({score: prevState + 1}));
setState((prevState)=> ({score: prevState + 1}));

這兩個都很好。

如果依賴於當前狀態，即使只是一個調用，只是使用對象更新器調用setState是錯誤的：

// does not work right
setState({
  score: this.state.score + 1,
  victory: this.state.score === 5 // this will be true one "turn/goal" later than expected
});