React：相同组件的不需要的多个实例

Question

My Dashboard React组件呈现多个子组件。当我更改父组件（仪表板）的状态时，将创建子组件的多个实例。然后将它们堆叠在一起： as shown here

显然这不是我想要的！每个组件只应显示一次。

这是一个简化的例子：

"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"terminal.integrated.shellArgs.windows": ["-ExecutionPolicy Bypass -NoLogo -NoProfile -NoExit -Command \"Invoke-Expression '. ''C:\\cmder\\vendor\\profile.ps1'''\""]

因此，无论何时单击按钮并设置状态，都会创建多个绘图实例。

以下是呈现上述组件的根组件：

 state = {
 goal : ''
}
 _refresh = () => {
    this.setState({
      goal: '5'
    })
  }

render() {
    return (
      <div>
        <div className='card'>
          <div className='heading'>
            <p style={{display: 'inline-block'}}>CURRENT WEIGHT</p>
            {this.state.goal}
            <button onClick={this._refresh}>hallo</button>
          </div>
          <CurrentPlot currentWeight={this.props.currentWeight} />
        </div>
        <div className='card'>
          <div className='heading'>
            <p>YOUR STATS</p>
          </div>
          <StatsPlot
            xData={this.props.xData}
            yData={this.props.yData}
          />
        </div>
      </div>
    )
  }

我真的很感激任何建议！