Javascript 如何将json数据推送到XY数组中以供查看？

想在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;

//从“/logo.svg”导入徽标；
//导入“/App.css”；
从“React”导入React，{Component}；
从“./data/csvjson.json”导入我的_数据；
导入{XYPlot、XAxis、YAxis、水平网格线、线系列、，
“react vis”中的垂直网格线、LineMarkSeries}；
导入“../node_modules/react-vis/dist/style.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
//react vis文档指出数据是这样一个对象：
//样本数据
//数据：[
//{x:0，y:8}，
//{x:1，y:5}，
//{x:2，y:4}
// ]
render（）{
返回(
);
}
}
导出默认应用程序；

您只需使用从某个API检索到的数据创建一个新数组即可。最简单的方法是通过

.map

。您可以运行类似这样的操作：

---

jsonData.map（（entry）=>（{x:entry.day，y:entry.flights}））

您需要预处理

my_数据

并将其存储在状态。应该有一个函数映射到

my_数据

，并返回具有x和y属性的对象的数组

{x:day，y:flight}

import React, { Component } from 'react';
import { render } from 'react-dom';
import my_data from './data/csvjson.json';
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries,
   VerticalGridLines, LineMarkSeries} from 'react-vis';

const processData = (data) => {
  return data.map(e => ({
    x: e.day,
    y: e.flights
  }));
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: processData(my_data)
    };
  }

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

render(<App />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./data/csvjson.json”导入我的_数据；
导入{XYPlot、XAxis、YAxis、水平网格线、线系列、，
“react vis”中的垂直网格线、LineMarkSeries}；
const processData=（数据）=>{
返回data.map（e=>({
x:e.day，
y:e.flights
}));
};
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：processData（my_数据）
};
}
render（）{
返回(
);
}
}
渲染（
我不确定我是否理解--您是否只是
映射航班数据，返回一个新对象，每个对象都带有
{x:flights，y:passengers}
（或您想要的任何内容）？您遇到的具体问题是什么？