React state 未按預期使用對 setState 的功能調用進行更新

Question

我有以下方法

handlePlayerSaveToggle(playerId) {
    this.setState(state => {
        console.log(JSON.stringify(state));
        state.players[playerId].saved = !state.players[playerId].saved;
        console.log(JSON.stringify(state));
        return state;
    });
}

這是一個回調方法，在按下保存按鈕時調用。 我最近在使用 setState 的功能風格時遇到了意外結果。

在這種情況下，對 console.log 的第二次調用會打印出與第一次調用不同的 object（保存的參數已正確更新 - 下面的屏幕截圖）。

現在問題出現在更新的 state 中。 我有另一個控制台日志作為渲染方法的第一行（也在屏幕截圖中顯示 - 第 58 行）。 如您所見，保存的參數尚未更新為true。

現在真正困擾我的是，如果我切換到非功能性口味，一切都會按預期進行。

handlePlayerSaveToggle(playerId) {
    let players = this.state.players;
    players[playerId].saved = !players[playerId].saved;
    this.setState({
        players: players
    });
}

Answer 1

我想你忘記了綁定： this.handlePlayerSaveToggle =this.handlePlayerSaveToggle.bind(this);

工作樣本： https://codesandbox.io/s/quizzical-leaf-w84pl?file=/src/App.js:256-330

Answer 2

當您設置 object state 時，您應該指定為新的 object。 因為 object 被指定為引用類型。

handlePlayerSaveToggle(playerId) {
    let players = this.state.players;
    players[playerId].saved = !players[playerId].saved;
    this.setState({
        players: [...players]
    });
}