Question

我正在尝试将highcharts模块（highstock单行系列）与React一起使用。我尝试使用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分配给变量，则会看到它返回的诺言仍然不是您所需要的，您需要从诺言中解析出价值。

我建议您在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
      }
    }
  ],

在React中获取Highcharts动态数据

1 个答案: