反应状态 = 了解更新后如何读取状态

如何解决反应状态 = 了解更新后如何读取状态

我非常精通 JavaScript，但正在学习 React。我正在尝试制作井字游戏。当我获胜时，我希望 this.state.message 立即更新， this.state.done 立即更改为 true，而 this.state.turn 不更改。目前我已经弄清楚了其中的一些，但没有了解 this.state.turn 的变化。它说错误的玩家获胜。我知道 setState 是异步的，这就是我无法一起更新这些内容的原因，我通过回调修复了其中的一些内容，但我正在努力寻找更好的方法并更好地理解所有内容。

class Board extends Component {
    constructor(props) {
        super(props);
        this.state = {
            board: ['','',''],turn: 'O',message: 'O goes',done: false
        }
    }
    
    addItem(x) {
        if (this.state.done === true) {
            this.setState({message: this.state.turn + ' wins'});
            return;
        }
        let array = [...this.state.board];
        if (array[x] !== "") {
            return;
        }
        array[x] = this.state.turn;
        this.setState({board: array},() => {
            this.checkWinners(0,1,2);
            this.checkWinners(3,4,5);
            this.checkWinners(6,7,8);
            this.checkWinners(0,3,6);
            this.checkWinners(1,7);
            this.checkWinners(2,5,8);
            this.checkWinners(2,6);
            if (this.state.done === false) {                                        
                this.setState({turn: (this.state.turn === "X") ? "O" : "X"});
                this.setState({message: (this.state.message === "X goes") ? "O goes" : "X goes"});
            }
        });
    }
    
    checkWinners(a,b,c) {
        if ((this.state.board[a] === "X"
            &&
            this.state.board[b] === "X"
            &&
            this.state.board[c] === "X")
            ||
            (this.state.board[a] === "O"
            &&
            this.state.board[b] === "O"
            &&
            this.state.board[c] === "O"
            )
            ) {
            this.setState({done: true},() => {
                console.log('Winner');
                this.setState({message: this.state.turn + ' wins'});
            });

            }
    }
    
    render() {
        return (
            <>
            <h1>tic-tac-toe</h1>
            <h2>{this.state.message}</h2>
            <div className="board">
            {this.state.board.map((item,index) => (
                <div className="Boxes" key={index} onClick={() => this.addItem(index)}>{this.state.board[index]}</div>
            ))}
            </div>
            </>
        )
    }
}

解决方法

您可以尝试以下代码，只是更改了 checkWinners 函数的逻辑并注释掉了 this.setState({ message: this.state.turn + " wins" }); 行。 [注意：更改了一些 css 以在本地测试]

   constructor(props) {
        super(props);
        this.state = {
            board: ["","",""],turn: "O",message: "O goes",done: false,};
    }

    addItem(x) {
        if (this.state.done === true) {

            // this.setState({ message: this.state.turn + " wins" });
            return;
        }
        let array = [...this.state.board];
        if (array[x] !== "") {
            return;
        }
        array[x] = this.state.turn;
        this.setState({ board: array },() => {
            this.checkWinners(0,1,2);
            this.checkWinners(3,4,5);
            this.checkWinners(6,7,8);
            this.checkWinners(0,3,6);
            this.checkWinners(1,7);
            this.checkWinners(2,5,8);
            this.checkWinners(2,6);
            if (this.state.done === false) {
                this.setState({ turn: this.state.turn === "X" ? "O" : "X" });
                this.setState({
                    message:
                        this.state.message === "X goes" ? "O goes" : "X goes",});
            }
        });
    }

    checkWinners(a,b,c) {
        if( this.state.board[a] === "X" &&
            this.state.board[b] === "X" &&
            this.state.board[c] === "X"){
            this.setState({ done: true },() => {
                console.log("Winner");
                this.setState({ message: "X wins" });
            });
        }else if(this.state.board[a] === "O" &&
            this.state.board[b] === "O" &&
            this.state.board[c] === "O"){
            this.setState({ done: true },() => {
                console.log("Winner");
                this.setState({ message: "O wins" });
            });
        }
    }

    render() {
        return (
            <>
                <h1>Tic-Tac-Toe</h1>
                <h2>{this.state.message}</h2>
                <div className="board container" style={{height:"500px",width:"500px"}}>
                    <div className={"row"} style={{minHeight:"80%"}}>
                        {this.state.board.map((item,index) => (
                            <div
                                className="col-3 bg-secondary m-1"
                                key={index}
                                onClick={() => this.addItem(index)}
                            >
                                {this.state.board[index]}
                            </div>
                        ))}
                    </div>
                </div>
            </>
        );
    }