在React中获取Highcharts动态数据

Question

我正在尝试使用带有React的highcharts模块（highstock单行系列）。我尝试使用axios从URL获取数据，但数据未显示在图表中。

这是我的数据传递函数的片段：

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'中获取数据但是无法从方法中获取结果并将其传递给系列的数据键。帮助感谢。

Answer 1

这里有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分配给一个变量，你会看到它返回一个仍然不是你需要的promise，你需要来自promise的已解析值。

我建议使用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
      }
    }
  ],