Блог

Я пытаюсь использовать highcharts модуль (однострочный ряд highstock) с React. Я попытался извлечь данные из URL, используя axios , но данные не отображаются на графике.

Вот фрагмент моей функции для передачи данных:

 series: [
    { name: 'Counts',
      data: (function() {
              axios.get('https://www.highcharts.com/samples/data/aapl-c.json')
              .then(res => {
                console.log(res.data, 'data fetched');
                return res.data;
              })
              .catch(err => {
                return err;
              })
          }()),
      tooltip: {
        valueDecimals: 2
    }
    }
  ],
  

Я также пытался извлекать данные в методе жизненного цикла компонента « componentDidMount , но не смог получить результат из метода и передать его в ключ данных серии. Помощь приветствуется.

Здесь есть 2 проблемы, сначала вам нужно вернуть что-то из вашей IIFE:

 (function() {
  return axios.get('https://www.highcharts.com/samples/data/aapl-c.json') // you're missing return here
   .then(res => {
     console.log(res.data, 'data fetched');
     return res.data;
   })
   .catch(err => {
     return err;
   })
 }())
  

Но если вы попытаетесь присвоить этот IIFE переменной, вы увидите, что она возвращает обещание, которое по-прежнему не то, что вам нужно, вам нужно разрешенное значение из обещания.

Я предлагаю использовать async/await в ваших componentDidMount и setState с выбранными данными. Вот так:

в вашем состоянии:

 this.state = {
  data: [],
}
  

в componentDidMount :

 async componentDidMount(){
  let data = await axios.get('https://www.highcharts.com/samples/data/aapl-c.json')
    .then(res => res.data)
    .catch(err => {
      return err;
  })
  this.setState({data})
}
  

Таким образом, вы будете устанавливать данные в state ответ на вызов
, и в вашем рендеринге вы можете использовать

 series: [
    { name: 'Counts',
      data: this.state.data,
      tooltip: {
        valueDecimals: 2
      }
    }
  ],