如何将json数据推送到React-vis的XY数组中？

Question

[试图在react-vis中开始一些图形绘制，并且想知道将json中的数据推送到状态的最佳方法是什么，以便我可以从图形访问状态数据。以下是我的测试json：

[
    {
      "day": "1",
      "flights":"58",
      "passengers": "6076"
    },
    {
        "day": "2",
        "flights": "78",
        "passengers": "7089"
    },
    {
        "day": "3",
        "flights": "101",
        "passengers": "9760"
    }
] 

我本质上是想将“ day”和“ flights”推入数据数组以模仿react-vis提供的样本。下面是我的代码：

App.js

//import logo from './logo.svg';
//import './App.css';
import React, { Component } from 'react';
import my_data from './data/csvjson.json';
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries,
   VerticalGridLines, LineMarkSeries} from 'react-vis';
import '../node_modules/react-vis/dist/style.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
     data:[]
  }
  }

  //react vis documentation points to data being an object like so:
   //sample data 
   //data:[
   // {x: 0, y: 8},
   // {x: 1, y: 5},
   // {x: 2, y: 4}
  // ]

  render() {
    return (
      <div>

        <XYPlot width={400} height={300}><XAxis/><YAxis/>
          <HorizontalGridLines />
          <VerticalGridLines />
          <LineMarkSeries data={this.state.data} />
        </XYPlot>
      </div>
    );
  }
}

export default App;

Answer 1

您想要做的就是简单地创建一个新数组，其中包含您从某些API中检索到的数据。最简单的方法是通过.map完成。您可以运行类似这样的内容：

jsonData.map((entry) => ({x: entry.day, y: entry.flights}))