реагировать состояние не обновляется от разных вызовов - PullRequest
Новая
       23

реагировать состояние не обновляется от разных вызовов

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

В игровом проекте памяти с использованием реагирования я пытаюсь создать всплывающее окно в конце игры с помощью кнопки, которая выведет вас на следующий уровень (больше карт).для создания следующего уровня я использую функцию resetGame, которая инициализирует состояние.свойство isFinished влияет на то, будет ли отображаться всплывающее окно.

, если я нажму кнопку «Сброс» - проблем нет.если я нажимаю кнопку следующего уровня - все свойства в состоянии инициализируются, кроме isFinished, и всплывающее окно остается.Как вы можете видеть, resetGame вызывается из кнопки сброса и компонента FinishPopup. 

render() { 
        return ( 
            <div style={boardStyle}>
                <h1 style={titleStyle}>Memory Game</h1>
                <Timer reset={this.state.resetRequest} />
                <div>
                    <Button onClick={()=>this.resetGame(rowsVar,columnsVar)} type="button" className="btn btn-secondary">Reset</Button>
                </div>
                <div style={cardWrapper}>
                   {this.renderBoard()}
                   {this.checkIfGameOver()}
                   {this.state.isFinished ? (<FinishPopup nextLevel={()=>this.resetGame(rowsVar+1,columnsVar+1)} />) : null }
                </div>
            </div>
        );
    }

это функция resetGame: 

resetGame=(rows,columns)=>{
    rowsVar=rows;
    columnsVar=columns;
    let newState = Object.assign({},this.state);
    newState.board = this.initialBoard(rows,columns);
    newState.numOfOpenCars = 0;
    newState.lastId="";
    newState.isFinished=false; //this is the property that does not changing
    newState.matchCounter=0;
    this.setState(newState);
}

, и это функция всплывающего рендеринга: 

render() { 
    return ( 

    <div style={popupStyle}>
        <div>
            <h1>
                Well done!!
            </h1>
            <button onClick={this.props.nextLevel}>Next Level</button> 
        </div>
    </div>);
}

Что я делаю не так?

...