Javascript 为什么setState（）不'；是否在React上更新渲染？

我正在尝试制作一个2D游戏板，它由一个名为

isAlive

的二进制状态值“Cells”组成。用户可以通过单击来更改此值。此值使用不同的颜色指示给用户。

Board.js

构造函数使用

false

值创建每个单元格。 电路板上还有一个“重置”按钮，用于将所有单元重置回

false

单击单元格时，单元格的值会正确更改。单击“重置”按钮时，我希望每个单元格的

isAlive

值为

false

。但是，当视觉上按下“重置”按钮时，电路板上没有变化（电池的颜色没有变化）。

console.log（this.state.cells）Board.js上的
handleClick（）
method上的code>line为所有单元格打印
props:Object{isAlive:false}
。那么，为什么单元格的更新不直观呢？我做错了什么

Board.js

export default class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cells: []
        };
        this.rowNum = 10;
        this.colNum = 10;

        for (let i = 0; i < (this.rowNum * this.colNum); i++) {
            this.state.cells.push(<Cell isAlive={false}/>);
        }
        this.handleClick = this.handleClick.bind(this);
        this.getCols = this.getCols.bind(this);

    }

    getCols() {
        let cols = [];
        for (let i = this.rowNum; i <= (this.rowNum * this.colNum); i += this.rowNum) {
            cols.push(this.state.cells.slice(i - this.rowNum, i).map(function (item, i) {
                return <div key={i}>{item}</div>
            }));
        }
        return cols;
    }

    handleClick() {
        const newBoard = this.state.cells;
        newBoard.forEach((item, index, arr) => {
            arr[index] = <Cell isAlive={false}/>
        });
        this.setState({
                cells: newBoard
            }, function () {
                console.log(this.state.cells);
            }
        );
    }

    render() {
        return (<div className="background">
                <table className="gameBoard">
                    <tbody>
                    <tr>
                        {this.getCols().map(function (item, index) {
                            return <td className="col" key={index}>{item}</td>
                        })}
                    </tr>
                    </tbody>
                </table>
                <button onClick={this.handleClick}> Reset</button>
            </div>
        );
    }

}

导出默认类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
单元格：[]
};
this.rowNum=10；
this.colNum=10；
for（设i=0；i<（this.rowNum*this.colNum）；i++）{
this.state.cells.push（）；
}
this.handleClick=this.handleClick.bind（this）；
this.getCols=this.getCols.bind（this）；
}
getCols（）{
设cols=[]；
for（让i=this.rowNum；i{
arr[索引]=
});
这是我的国家({
单元：新板
}，函数（）{
console.log（this.state.cells）；
}
);
}
render（）{
返回(
{this.getCols（）.map（函数（项，索引）{
返回{item}
})}
重置
);
}
}

Cell.js的重要部分包括：

export default class Cell extends React.Component {
    constructor(props) {
        super(props);
        this.colors = {
            dead: '#041b40',
            alive: '#b2e8f7',
            hover_dead: '#495d76',
            hover_alive: '#e6fffd'
        };

        this.state = {
            isAlive: this.props.isAlive,
            isMouseDown: false,
            isHovering: false
        };


        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({
            isAlive: !this.state.isAlive,
            isMouseDown: this.state.isMouseDown,
            isHovering: this.state.isHovering

        })
    }

    ...

    determineColor() {
        if (this.state.isAlive && this.state.isHovering) {
            return this.colors.hover_alive;
        } else if (!this.state.isAlive && this.state.isHovering) {
            return this.colors.hover_dead;
        } else if (this.state.isAlive && !this.state.isHovering) {
            return this.colors.alive;
        }else {
            return this.colors.dead;
        }
    }

    render() {
        return (
            <div>
                <button className='square'
                        onClick={this.handleClick}
                        type='button'
                        style={{
                            backgroundColor: this.determineColor()
                        }}>
                </button>
            </div>
        )
    };


}


导出默认类单元格扩展React.Component{
建造师（道具）{
超级（道具）；
此项。颜色={
死亡：“#041b40”，
活动：“#b2e8f7”，
悬停死亡：“#495d76”，
活动悬停：“#e6fffd”
};
此.state={
isAlive:this.props.isAlive，
isMouseDown:错，
isHovering:错
};
this.handleClick=this.handleClick.bind（this）
}
handleClick（）{
这是我的国家({
isAlive:！this.state.isAlive，
isMouseDown:this.state.isMouseDown，
Ishoring:这个州
})
}
...
确定颜色（）{
if（this.state.isAlive&&this.state.isHovering）{
将此.colors.hover\u活动返回；
}如果（！this.state.isAlive&&this.state.isHovering），则为else{
返回此.colors.hover\u dead；
}else if（this.state.isAlive&！this.state.isHovering）{
返回此.colors.alive；
}否则{
归还这个。颜色。死亡；
}
}
render（）{
返回(
)
};
}
您需要在道具更改时更新内部状态：

导出默认类单元格扩展React.Component{
建造师（道具）{
超级（道具）；
此项。颜色={
死亡：“#041b40”，
活动：“#b2e8f7”，
悬停死亡：“#495d76”，
活动悬停：“#e6fffd”
};
此.state={
isAlive:this.props.isAlive，
isMouseDown:错，
isHovering:错
};
this.handleClick=this.handleClick.bind（this）
}
componentDidUpdate（prevProps，prevState）{/您必须使用componentDidUpdate

 componentDidUpdate(prevProps) {
    
      if (this.props.isAlive!== prevProps.isAlive) {
      this.setState({isAlive: this.props.isAlive})
      }
    }

您不需要将单元组件保留为板组件的状态。您应该只保留阵列中单元的活动状态。谢谢您的回答！当我第一次单击按钮时，您和zahra的回答都很好。但是，当我第二次单击按钮时，它不会再次在视觉上更新。这是为什么？哟你的点击功能总是设置为false，那么为什么会发生任何变化呢？我在第二次重置之前点击了一些单元格的isAlive值，将它们更改为“true”。这些单元格在按下重置按钮后仍然保持“true”。也许这个链接将帮助你将状态更改为true和false