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]
    });
}