Javascript 通过单击按钮更改函数中的状态不会触发React.js中的重新渲染器

我有一个矩阵的细胞-小矩形-在反应和一个按钮。单击一个按钮，我想清除所有单元格。首先，我创建了很多空单元格和一些非空单元格，并将其传递给CellGrid组件，这会使所有单元格都很好。我将按钮onClick链接到一个函数，该函数会更改状态（this.state.cells），但不会触发子组件（CellGrid）中的重新渲染器

class Playfield扩展React.Component{
建造师（道具）{
超级（道具）；
this.clearButtonClick=this.clearButtonClick.bind（this）；
}
组件willmount（）{
var-arr=[]；
对于（var i=0；i<64*64；++i）{//首先是所有空单元格
arr.push（{id:i，状态：“空”}）；
}
对于（var i=0；i

细胞网格是这样的

class CellGrid extends React.Component {
  constructor(props){
    super(props);
    this.renderCells = this.renderCells.bind(this);
  }

  renderCells(){
    return (this.props.grid_cells.map(function(cell){
      return (        
        <Cell id={cell.id} status={cell.status}/>);
    }));
  }

  render(){
    return (
      <div className="CellGrid">
        {this.renderCells()}        
      </div>
    );
  }
}

class CellGrid扩展了React.Component{
建造师（道具）{
超级（道具）；
this.renderCells=this.renderCells.bind（this）；
}
renderCells（）{
return（this.props.grid\u cells.map）（函数（cell）{
报税表（
);
}));
}
render（）{
返回(
{this.renderCells（）}
);
}
}

---

有人得到提示吗？相关问题都以错误的方式改变了状态

它实际上在工作；您可以在CellGrid的render方法中放置控制台日志，以查看在单击“清除”时触发的渲染。问题实际上存在于

组件中

似乎只在初始安装时使用道具的状态，它将道具的

状态

复制到自己的内部状态，然后单元格的呈现来自

this.state.status

，而不是

this.props.status

。我想你这样做是为了用onClick切换单元格。您可能想做的是在

中去掉本地状态，并始终使用

this.props.status

进行渲染，并且只需从

到

再从

到每个

进行一次点击

---

另外，在从数组中呈现组件时（如在

中），请确保使用的是

键=

属性。

在构造函数中，需要将状态初始化为

this.state={cells:arr，}你的代码适合我。我对Playfield中的第一个循环做了一个小小的更新，所以它们在开始时都设置为“活动”，然后我单击“清除”，它将它们全部设置为空。两个组件都重新渲染。我唯一没有的组件是
和
，所以我只使用
s作为单元格和基本
标记。按钮组件中的onClick是否正确传递？@TheZanke是的，console.log（“clear”）被写入控制台，因此我们可以访问它。这是这个项目的副本：@TheZanke好吧，牢房就是罪魁祸首。我正在使用this.state.status跟踪单元格内的“空”等；但是这个.props.status实际上会清除我的东西。但是，当我现在单击它时，如何更改它的状态？我需要以某种方式在渲染中仍然使用this.state.status，但获取新的this.props.status数据以将其转换为我的新状态。@CloseCall抱歉，我正在编写我的答案，直到现在才看到此注释，是的，我在答案中详细说明了一个选项。如果
是真相的来源，那可能就是应该定义onCellClick方法的地方；只需让函数获取一个ID并将其传递给
，然后使用要更新的单元格ID调用它。本地状态用于呈现子组件而不是道具。非常感谢。
class CellGrid extends React.Component {
  constructor(props){
    super(props);
    this.renderCells = this.renderCells.bind(this);
  }

  renderCells(){
    return (this.props.grid_cells.map(function(cell){
      return (        
        <Cell id={cell.id} status={cell.status}/>);
    }));
  }

  render(){
    return (
      <div className="CellGrid">
        {this.renderCells()}        
      </div>
    );
  }
}