我在React和按钮中有一个单元格矩阵 - 小矩形 . 单击按钮,我想清除所有单元格 . 首先,我创建了许多空单元格,其中包含一些非空单元格,并将其传递给CellGrid组件,这使得所有单元格都很好 . 我将按钮onClick链接到一个函数,该函数更改状态(this.state.cells),但它不会在子组件(CellGrid)中触发重新渲染 .
class Playfield extends React.Component {
constructor(props){
super(props);
this.clearButtonClick = this.clearButtonClick.bind(this);
}
componentWillMount(){
var arr = [];
for (var i=0; i < 64*64; ++i){ // all empty cells at first
arr.push({id:i, status: "empty"});
}
for (var i=0; i < startCells.length; ++i){ // mark special cells
var newIndex = startCells[i].x + 64*startCells[i].y;
arr[newIndex].status = "alive";
}
this.setState({ // change state
cells: arr
});
}
clearButtonClick(){
console.log("clear")
var newArr = [];
for (var i=0; i < this.state.cells.length; ++i){ // all empty cells again
newArr.push({id:i, status: "empty"});
}
this.setState({ // change state --- NOT UPDATING THE RENDER
cells: newArr
});
}
render(){
return (
<div className="Playfield">
<CellGrid grid_cells={this.state.cells}/>
<Button onClick={this.clearButtonClick}>CLEAR</Button>
</div>
);
}
}
CellGrid看起来像这样 .
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>
);
}
}
有人有提示吗?相关问题都改变了国家的错误方式 .
1 回答
它实际上是有效的;您可以将控制台日志放在CellGrid的render方法中,以查看单击clear时触发的渲染 . 问题实际上在你的
<Cell>
组件中 .<Cell>
似乎只在初始安装时使用props的状态,它将status
从props复制到它自己的内部状态,然后渲染单元格来自this.state.status
而不是this.props.status
. 我想你是这样做的,用onClick来切换单元格 . 您可能想要做的是摆脱<Cell>
中的本地状态并始终使用this.props.status
渲染它,并且还将onClick从<Playfield>
传递到<CellGrid>
然后从<CellGrid>
传递到每个<Cell>
.此外,确保在从数组中呈现组件时使用
key=
属性(例如<CellGrid>
) .