Question

我在控制台上收到警告：

Do not mutate state directly. Use setState()  react/no-direct-mutation-state

对于this.state.turn = this.state.turn === 'X' ? 'O' : 'X';，我将其更改为this.setState({turn: 'X' ? 'O' : 'X'});，这确实摆脱了警告，但是我这样做的时候，我的程序未按照应有的方式执行，这使我相信自己正在这样做错了。

对于this.state.totalMoves++;，我将其更改为this.setState({totalMoves: this.state.totalMoves++});，但仍然收到该警告。

实现此目标的正确方法是什么？

这是我的代码：

constructor(props) {
    super(props);
    this.state = {
        turn: 'X',
        board: Array(9).fill(''),
        totalMoves: 0
    }
}

if(this.state.board[box.dataset.square] === '') {
    // was previously this.state.board[box.dataset.square] = this.state.turn

    this.setState({turn: this.state.board[box.dataset.square]});
    box.innerText = this.state.turn;

    this.state.turn = this.state.turn === 'X' ? 'O' : 'X';
    this.state.totalMoves++;
}

Answer 1

Firstly setState是异步的，因此不会立即反映setState的更新，您可以使用setState回调在状态更新后执行某些操作

this.setState(state => {
   box.innerText = state.turn;
   return { turn: state.board[box.dataset.square]}
});

Secondly，setState提供了一种功能性的回调方法来根据先前的状态更新状态

您的情况是这样写的

this.setState(prevState => ({
     turn: prevState.turn === 'X' ? 'O' : 'X', 
     totalMoves: prevState.totalMoves + 1
});

对于该特定示例，我将如何使用setState？

1 个答案: