Reactjs 反应不'；即使状态发生更改，也不能渲染具有更改的组件

正如我在react主页中遵循教程一样。我想修改x-o游戏代码，以便在游戏中前后移动。我包括下面的代码

历史记录记录在历史记录列表中，pos是列表上当前选择的索引

正如你所看到的，我有三个按钮：重置、向上、向下。当你按下重置键时，我会重置状态。当你按向上时，我增加位置。当你按向下时，我减少位置。我还显示要检查的位置

问题是pos正在更新，但组件没有重新渲染。为了便于使用，我包括heroku

我错过了什么

    import React, { Component } from 'react';
import './App.css';


function Square(props){
    return (
        <div className="square" onClick={() => props.onClick()}>
            {props.value}
        </div>
    );
}

function calculateWinner(squares){
    const winners = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 4, 8],
        [2, 4, 6],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8]
    ];
    for(let i = 0; i < winners.length; i++){
        const [a, b, c] = winners[i];
        if(squares[a] && squares[b] === squares[a] && squares[c] === squares[a]){
            return squares[a];
        }
    }
    return null;
}

class Board extends Component{
    constructor() {
        super();
        this.state = {
            history: [Array(9).fill(null)],
            pos : 0,
            xIsNext: true
        }
    }

    handleClick(i){
        const current = this.state.history[this.state.pos];
        if (current[i] || calculateWinner(current)) {

        } else {
            const history = this.state.history.slice();
            const squares = history[this.state.pos].slice();
            squares[i] = this.state.xIsNext ? "X" : "O";
            history[this.state.pos + 1] = squares;
            this.setState({
                history: history,
                pos: this.state.pos + 1,
                xIsNext: !this.state.xIsNext
            });
        }
    }

    clickReset(){
        this.setState(
            {
                history: [Array(9).fill(null)],
                pos : 0,
                xIsNext: true
            }
        );
    }
    clickUp(){
        let pos = this.state.pos;
        if(pos < this.state.history.length) {
            pos += 1;
            this.setState(
                {
                    pos: pos,
                    xIsNext: !this.state.xIsNext
                }
            );
        }
    }
    clickDown(){
        let pos = this.state.pos;
        if(pos > 0) {
            pos -= 1;
            this.setState(
                {
                    pos: pos,
                    xIsNext: !this.state.xIsNext
                }
            );
        }
    }
    renderSquare(i){
        let current = this.state.history[this.state.pos];
        return (
            <Square value={current[i]} onClick={() => this.handleClick(i)}/>
        )
    }

    render() {
        let status ;
        const pos = this.state.pos;
        const current = this.state.history[pos];
        const winnerCal = calculateWinner(current);
        if (winnerCal){
            status = "Winner : " + winnerCal;
        } else {
            status = "Next Play : " + (this.state.xIsNext ? "X" : "O");
        }
        return (
            <div className="col">

                <div className="row justify-content-center">
                    <div className="board-row">
                        {this.renderSquare(0)}
                        {this.renderSquare(1)}
                        {this.renderSquare(2)}
                    </div>
                    <div className="w-100"></div>
                    <div className="board-row">
                        {this.renderSquare(3)}
                        {this.renderSquare(4)}
                        {this.renderSquare(5)}
                    </div>
                    <div className="w-100"></div>
                    <div className="board-row">
                        {this.renderSquare(6)}
                        {this.renderSquare(7)}
                        {this.renderSquare(8)}
                    </div>
                </div>
                <div className="row justify-content-center">
                    {status} pos: {pos}
                </div>
                <div className="row-fluid">
                    <button type="button" className="col-md-4 btn btn-warning" onClick={() => this.clickReset()}>Reset</button>
                    <button type="button" className="col-md-4 btn btn-danger" onClick={() => this.clickUp()}>up</button>
                    <button type="button" className="col-md-4 btn btn-info" onClick={() => this.clickDown()}>down</button>
                </div>
            </div>
        )
    }
}
class App extends Component {

    renderHeader(){
        return (
            <div className="row justify-content-center">
                <div className="col"></div>
                <div className="col">
                    <h3 className="row justify-content-center"> Lets build a xo game </h3>
                </div>
                <div className="col"></div>
            </div>
        )
    }

    renderBoard(){
        return (
            <div className="row">
                <div className="col"></div>
                <Board className="col"/>
                <div className="col"></div>
            </div>
        )
    }

    render() {
        return (
            <div className="container">
                {this.renderHeader()}
                {this.renderBoard()}
            </div>
        );
    }
}

export default App;

到

---

您的方法很可能运行良好。问题是您的历史记录被覆盖

const squares = history[this.state.pos];
squares[i] = this.state.xIsNext ? "X" : "O";
history[history.length] = squares;

导致历史[history.length]引用与历史[history.length-1]相同的对象，依此类推到历史[0]

试用

const squares = history[this.state.pos].slice();

---

我在render函数中放置了一个断点，每次单击按钮时它都会被调用。ok将问题更改为更准确的问题，解决了问题，但为什么链接到单个正方形上的handleClick（）会影响应该渲染的内容。当我单击“向上”或“向下”时，要更清楚地了解handleClick（）的依赖关系是什么，handleClick（）是一个onClick方法（），如果您可以说slice（）的重要性是什么的话。如果您在handleClick（）更新了组件状态，并且状态更改触发了新的渲染，这将非常有用。当您调用setState时，您会更改整个电路板的状态（根据此.state.history呈现）。这个问题是由于修改了最初得到的相同的squares数组导致的，这使得历史集合中的所有数组都引用了相同的实例。为了使每个新的历史事件成为前一步的副本，我使用slice获得了一个浅副本

const squares = history[this.state.pos];
squares[i] = this.state.xIsNext ? "X" : "O";
history[history.length] = squares;

const squares = history[this.state.pos].slice();