再次发送道具渲染组件一次

Question

CalculateResults.js和ScoreBox.js是类组件。

我以ScoreBox的形式CalculateResults发送我想看到的结果，如下所示：

CalculateResults.js

render(){
        return(
                <ScoreBox calculate={this.state.calculate} />
        )
}

我在ScoreBox中得到了这样的道具：

ScoreBox.js

render(){
        return (
            <div className="scoreBox d-flex">>
                       <div>
                           <p>score</p>
                           <h2>{this.props.calculate}</h2>
                       </div>
            </div>       
        );
}    

我的问题是它不会更新得分框，而是在前一个得分框旁边渲染另一个得分框，并在那里显示结果。

整个故事是这样的：Scorebox组件存在，然后当我单击UserMove.js中的按钮时，一个名为onlyChooseOne的布尔值变为真，并且我向CalculateResults.js发送了一些道具，如下所示：

UserMove.js

render(){
        return(
             <div>
                {
                !onlyChooseOne
                &&
                <CalculateResult number={randomNumber} userChoice={userChoice} />
                }
        )
             </div>
}

我应该如何解决？