Javascript 转换为将API数据发送到要在折线图中使用的其他组件

我正在尝试了解如何将这些数据设置为道具，或者我需要做些什么才能在使用Chart.js的各个折线图组件中使用这些数据。Api调用正在工作，我在两个单独的Api.js文件中获得了所需的所有数据，并且能够将其呈现出来。然而，现在我有了它，我想知道我最好的选择是什么，将它发送过来，以便能够显示在折线图中。我还得到了一个错误，

列表中的每个子项都应该有一个键属性

，您可以看到我正在尝试分配键。我在这方面没有经验，所以任何帮助和指导都将不胜感激

下面是一个api调用，用于获取我试图跨组件共享的数据：

import React, { Component } from 'react'

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXXX_XXXX_XXXXXXXXXXXXXXXXXXXXXX',
  'Content-Type': 'application/json'
};

class JobsTableApi extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    this.fetchData();
  }    

  fetchData = () => {    
     let body = {"from":"bpz99ram7","select":[3,6,80,81,82,83,86,84,88,89,90,91,92,93,94,95,96,97,98,99,101,103,104,105,106,107,109,111,113,115,120,123,224,225,226,227,228,229,230,231,477,479,480,481],"where": "{40.CT. 'In Progress'}","sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":40,"grouping":"equal-values"}],"options":{"skip":0,"top":0,"compareWithAppLocalTime":false}}

    fetch('https://api.quickbase.com/v1/records/query', {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(body)
    }).then(response => response.json())
      .then( data => this.setState({ data })
      );
    }

  render() {
    const { data } = this.state;

      if (data === null) return 'Loading...';

    return (
      <ul>
        {Object.keys(data["data"]).map(item =>
          <div>
            <h2>
              {data["data"][item][3].value} -- {data["data"][item][6].value}
              <br />
              <a>{data["data"][item][40].value}</a>
            </h2>
            <h5>Overall Project Totals:</h5>
              <p key="AdjContractAmt">Adj Contract Amount: ${Math.round(data["data"][item][80].value)},</p>
              <p key="DesignHours">Design Hours: {Math.round(data["data"][item][88].value)},</p>
              <p key="DesignAmount">Design Amount: ${Math.round(data["data"][item][91].value)},</p>
              <p key="SubRoughHours">SubRough Hours: {Math.round(data["data"][item][92].value)},</p>
              <p key="SubRoughAmount">SubRough Amount: ${Math.round(data["data"][item][95].value)},</p>
              <p key="RoughHours">Rough Hours: {Math.round(data["data"][item][96].value)},</p>
              <p key="RoughAmount">Rough Amount: ${Math.round(data["data"][item][98].value)},</p>
              <p key="FinishHours">Finish Hours: {Math.round(data["data"][item][104].value)},</p>
              <p key="FinishAmount">Finish Amount: ${Math.round(data["data"][item][107].value)},</p>
              <p key="CloseHours">Close Hours: {Math.round(data["data"][item][477].value)},</p>
              <p key="CloseAmount">Close Amount: ${Math.round(data["data"][item][480].value)},</p>
              <p key="CurrentHours">CURRENT/ACTUAL Hours: {Math.round(data["data"][item][479].value)},</p>
              <p key="CurrentAmount">CURRENT/ACTUAL Amount: ${Math.round(data["data"][item][224].value)}</p>
          </div>
        )}
      </ul>
    )
  }
}

export default JobsTableApi;

---

谢谢

这是关于结构内部div的标识：

>src
    >components
        >charts
            >multipleLineCharts.js
        >API
            >api.js1
            >api.js2

映射元素数组时，请执行以下操作：

  {Object.keys(data["data"]).map(item, i =>
          <div key = {i}>

          </div>
  }

{Object.keys（data[“data”]）.map（item，i=>
}

用于显示我建议使用的图表

---

不建议使用索引作为每个元素的键。最好使用其他一些信息，如

item.id

可存储为键。折线图组件与检索数据的组件（父、子、同级）的关系在哪里？现在，我正在使用api文件在api文件夹中的components文件夹中提取数据，该文件夹中还包含一个charts文件夹，其中包含我希望数据流向的所有折线图。然后在我的app.js中，我将使用这些折线图显示在一个页面上。有几种方法可以做到这一点。一种方法是在app.js文件中调用数据（我假设这是图表的父文件）并将数据传递给每个图表。另一种方法是，在App.js中，您可以定义数据道具，我猜每个api文件一个，并在api文件中设置检索到的数据的状态。然后，您可以将数据道具传递给图表文件。这就是我不确定如何做的地方。例如，现在[80]我需要一个字段，但我不能做props。[80]，比如你如何做props.name。所以我不确定如何转换它，以便能够根据需要调用我组件上的每个字段。你可以获取数据，使用函数以对你有用的方式构造数据，并将其作为道具传递。