反应，setState和重新渲染组件

Question

在我的react应用程序中，我试图获得切换图形背景色的结果，即使图形已经在屏幕上加载/渲染。

使用我当前的代码，如果我单击复选框以切换颜色，那么就将颜色设置为状态并将其传递到我的组件中而言，它工作得非常好，但是我必须在屏幕上重新加载该组件才能看到更改，但它们确实会在此时显示。

我尝试使用forceUpdate（）纠正此问题，但无济于事

这时我该怎么做，以确保当此函数的状态更改时，它会完全重新加载组件？

state = {
  renderCalories: true,
  graphBackgroundColor: '#fff',
  graphLabelColor: '#000'

};


toggleCOlor = event => {
  console.log('toggling color');
  this.setState({
   graphBackgroundColor: '#000',
   graphLabelColor: '#fff'
  });
 this.forceUpdate();
}
render() {
 return (
  <div>
   <div className={styles.dropDown}>
     <FormControl style={{minWidth: 120}} className={styles.formControl}>
      <FormControlLabel
        value="end"
        control={<Checkbox color="primary" />}
        label="Toggle Graph Background Color"
        labelPlacement="end"
        onChange={this.toggleCOlor}
      />
      </FormControl>
    </div>

  {this.state.renderCalories && <NetCalorieTrend backgroundColor={this.state.graphBackgroundColor} labelColor={this.state.graphLabelColor} />}

...
}