Переключить компонент с зависимостью от состояния - PullRequest
Новая
       33

Переключить компонент с зависимостью от состояния

0 голосов
/ 22 марта 2019

Я пытаюсь создать меню для выбора уровня игры и соответственно создать настольную игру.

Приложение вылетает каждый раз, когда я нажимаю кнопку Easy (или любую другую, еще не реализованную).

Я предполагаю, что это связано с зависимостью компонента 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;
}
...