Reactjs 为什么我的组件中的handleClick方法似乎是循环的？

我开始学习一些react，并尝试创建一个由可点击按钮组成的网格。现在我只想在点击按钮后改变它的颜色

从这开始，我编写了我的组件，通过循环创建一个可变大小的网格。 我在网格组件中添加了一个handleClick方法来更改所单击按钮的颜色。但是，当我单击按钮时，整个列的颜色都会改变

从调试器中，它似乎将索引（i和j）的正确值传递给handleClick方法，因此我不知道为什么会发生这种情况

我的组件的代码如下所示：

var height = 3;
var width = 5;

class Cell extends React.Component {
    render() {
      return (
        <button 
        className={ this.props.value === 'ON' ? "cell cellOn" : "cell 
                    cellOff" }
        onClick={() => this.props.onClick()}>
        </button>
      );
    }
  }

export class Grid extends Component  {
    constructor(props) {
        super(props);
        this.state = {
          cells: Array(height).fill(Array(width).fill(null)),
        };
    }

    handleClick(i, j) {
        const cells = this.state.cells.slice();
        cells[i][j] = ( cells[i][j] === 'ON' ) ? 'OFF' : 'ON' ;
        this.setState({cells: cells});
    }


    renderCell(i, j) {     
        return(
        <Cell value={this.state.cells[i][j]} 
        onClick={() => this.handleClick(i, j)} />
        );
    }

    renderCellRow(i, w) {
        return(
        <div>
            {Array.from(Array(w), (_,x) => x).map((j) => this.renderCell(i, j)) }
        </div>
        );
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
            <div className="status">{status}</div>
            <div>
              {Array.from(Array(height), (_,x) => x).map((i) => this.renderCellRow(i, width)) }
            </div>

            </div>
        );
    }
}

var高度=3；
var宽度=5；
类单元格扩展了React.Component{
render（）{
返回(
this.props.onClick（）}>
);
}
}
导出类网格扩展组件{
建造师（道具）{
超级（道具）；
此.state={
单元格：数组（高度）.填充（数组（宽度）.填充（空）），
};
}
手舔（i，j）{
const cells=this.state.cells.slice（）；
单元[i][j]=（单元[i][j]='ON'）？'OFF'：'ON'；
this.setState（{cells:cells}）；
}
renderCell（i，j）{
返回(
this.handleClick（i，j）}/>
);
}
renderCellRow（i，w）{
返回(
{Array.from（Array（w），（u，x）=>x.map（（j）=>this.renderCell（i，j））}
);
}
render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{Array.from（Array（height），（\ux）=>x.map（（i）=>this.renderCellRow（i，width））}
);
}
}

有人能提供一些建议吗？是不是因为我以前在高度和宽度上循环调用了map？

---

提前谢谢

问题在于您的状态初始化方式：

Array(height).fill(Array(width).fill(null))

我建议避免使用

fill

。它通过引用用对象填充数组。所以当你改变其中一个的时候，你会得到另一个的更新

---

这是一个工作版本的代码笔

非常感谢，这确实是我的问题！我将尝试找到一个动态调用（创建一个“矩阵”heightxwidth），它可以替代填充，然后回来用它编辑我的评论。编辑：

cells:[…数组（高度）.keys（）].map（i=>Array（宽度））

在不引起对象问题的情况下完成了该操作