Question

在使用react的内存游戏项目中，我试图在游戏结束时创建一个弹出式窗口，并带有一个将您带入下一个级别的按钮（更多卡）。为了创建下一个级别，我正在使用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>);
}

我在做什么错了？

反应状态不是从不同的呼叫更新

0 个答案: