reactjs - 试图设置 react-highcharts 的状态，但它不起作用？

Question

如标题所述，如何在高图表的反应中设置具有状态值的数据？this.state.number的值为0 / undefined

代码

getFirstMonthOpenEnhancements(){
    fetch(`http://ca-fpscfb2:4000/1stMonthOpenedEnhancements?airline=${this.state.airlineName}&product=${this.state.airlineProduct}`)
    .then(response => response.json())
    .then( response =>  
        this.setState(
        { 
          number: parseInt(response.data.total) 
        }
    ))

    .catch(err => console.error(err))
  }
 componentDidMount(){
    this.getFirstMonthOpenEnhancements();
    let chart = this.refs.chart.getChart();
    chart.series[4].setData([this.state.number, 4, 4, 4]);
 }

Answer 1

该this.state.number属性是未定义的，因为您的 API 请求是异步的，因此当您请求this.state.number其未定义的值时，因为您的 API 调用尚未返回。

有几种不同的解决方案，但在我看来，最优雅的是返回一个承诺。

getFirstMonthOpenEnhancements(){
    return new Promise((resolve, reject) => {
        fetch(`http://ca-fpscfb2:4000/1stMonthOpenedEnhancements?airline=${this.state.airlineName}&product=${this.state.airlineProduct}`)
        .then(response => response.json())
        .then( response =>  
            return resolve(parseInt(response.data.total))
        ))
        .catch((err) => { return reject(err) });
    });
}

componentDidMount(){
    this.getFirstMonthOpenEnhancements()
    .then((someNumber) => {
        let chart = this.refs.chart.getChart();
        chart.series[4].setData([someNumber, 4, 4, 4]);
        this.setState({ number: someNumber });
    })
    .catch((err) => { console.log(err); });
 }