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
    })
}

由于某种原因，当我第一次单击该按钮时，图表会被上推，然后每次连续单击都保持不变。我无法理解这种行为。我的图表的选项是通过调用后端Express服务器来设置的。代码如下：

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

在React中切换是否会影响高图显示？

1 个答案: