Влияет ли переключение в React на отображение старшей диаграммы?

Question

Я просто переключаю отображаемое значение при нажатии кнопки следующим образом:

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome </h1>
        </header>

        <div id={'container'}>
          <HighchartsReact
            highcharts={Highcharts}
            options={this.state.options}
          />
        </div>

        <button onClick={this.toggleHidden.bind(this)}>More info</button>
      </div>
    );
  }

ToggleHidden и конструктор определяются следующим образом:

constructor(props){
    super(props);
    this.state={isHidden:true,options:{},currentdisplay:{}};
    //this.show= this.show.bind(this);
}

componentDidMount(){
    this.callApi()
    .then(res => this.setState({options:res}))
    .catch(err => console.log(err));
};

toggleHidden () {
    this.setState({
        isHidden: !this.state.isHidden
    })
}

По какой-то причине моя диаграмматолкается вверх, когда я нажимаю кнопку в первый раз, а затем при каждом последующем нажатии она остается прежней.Я не могу понять это поведение.Параметры для моей диаграммы устанавливаются при обращении к внутреннему экспресс-серверу.Код выглядит следующим образом:

callApi = async () => {
  const response = await fetch('/api/xdata', {
    headers: new Headers({
      'Content-Type': 'application/json'
    })
  });

  const body = await response.json();
  const response2 = await fetch('/api/ydata', {
    headers: new Headers({
      'Content-Type': 'application/json'
    })
  });
  const body2 = await response2.json();

  const re = JSON.parse(body);

  var re2 = JSON.parse(re2);

  var options = {
    title: {
      text: 'Trying'
    },
    chart: {
      type: 'column'
    },
    xAxis: {
      title: { text: 'xdata' },
      categories: re.xdata
    },
    yAxis: {
      title: {
        text: 'y data'
      }
    },
    series: {
      data: re2.ydata.map(Number)
    }
  };

  if (response.status !== 200) throw Error(body.message);
  return options;
};

Answer 1

Реагирует setState вызывает chart.update, вы можете проверить это в этом примере: https://codesandbox.io/s/50p5l109nn

Чтобы избежать обновления диаграммы, добавьте небольшую модификацию к HighchartsReact обертке:

componentWillReceiveProps: function() {
  if (this.props.update) {
    this.chart.update(
      Object.assign({}, this.props.options),
      true,
      !(this.props.oneToOne === false)
    );
  }
},

И установите update в значение false:

    <HighchartsReact
      highcharts={Highcharts}
      constructorType={"chart"}
      options={options}
      update={false}
    />

Демонстрационная версия: https://codesandbox.io/s/5256qj19lx