пытаясь установить состояние реакционно-высоких графиков, но это не работает?

Question

Как указано в заголовке, как установить данные со значением состояния в реакции для старших графиков? Значение this.state.number равно 0 / не определено

КОД

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