我正在尝试创建一个菜单来分别选择游戏级别和创建棋盘游戏。
每当我单击“轻松”按钮(或其他任何按钮,尚未实现其他按钮)时,应用程序崩溃。
我猜想这与状态中的行和列属性中的MemGame组件的依赖性有关,但是我想不出一种消除此依赖性的方法,是否有解决此问题的方法? 还是您会建议如何不同?
谢谢
state = {
rows: 0,
columns: 0,
levelMenu: true
}
render() {
return (
<div>
{this.state.levelMenu?
<div>
<Button onClick={()=>this.handleLevelClick(1)}>Easy</Button>
<Button onClick={()=>this.handleLevelClick(2)}>Medium</Button>
<Button onClick={()=>this.handleLevelClick(3)}>Hard</Button>
<Button onClick={()=>this.handleLevelClick(4)}>VeryHard</Button>
</div>
:
<MemGame rows={this.state.rows} columns={this.state.columns} />}
</div>
);
}
handleLevelClick(level){
if(level===1){
this.setState({rows:2,columns:2});
}
.......
this.toggleMenu()
}
toggleMenu(){
this.setState({levelMenu: !this.state.levelMenu});
}
最后的行和列进入其他组件的状态
class Board extends Component {
state={
board: this.initialBoard(this.props.rows,this.props.columns),
numOfOpenCards: 0,
lastId: "",
matchCounter:0,
clickCount: 0,
isFinished: false,
firstClick: false,
resetRequest: false
}
initialBoard(rows,columns){
let board=[];
const imageData = this.chooseImages(rows,columns);
const boardSize = rows*columns;
for(let index=0;index<boardSize;index++){
board[index]={
id: uuid.v4(),
imgUrl: imageData[index],
faceUp: false,
paired: false
};
}
return board;
}