时间戳

首页 > 解决方案 > 对于这个特定的示例，我将如何使用 setState？

javascript - 对于这个特定的示例，我将如何使用 setState？

问题描述

我在控制台中收到警告，上面写着：

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++;
}

标签： javascriptreactjsdebugging

解决方案

FirstlysetState 是异步的，因此 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
});

推荐阅读