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

Question

我正在尝试如何将这些数据设置为道具，或者我需要做些什么才能使用Chart.js在我的各个折线图组件中使用这些数据。Api调用正在工作，我正在从两个独立的Api.js文件中获取所需的所有数据，并能够将其渲染。然而，现在我有了这个，我想知道我最好的选择是什么，把它发送出去，以便能够显示在折线图中。我也收到了Each Child in a list should have a key prop的错误，你可以看到我试图分配密钥。我在这方面没有经验，所以任何帮助和指导都将不胜感激。

下面是一个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;

我听说redux对这个有好处？但我也听说这主要是针对更大的应用程序，一旦我得到这些数据用于折线图，这就是我所需要的。

文件结构：

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

谢谢！

Answer 1

这是关于结构内部div的身份：

https://reactjs.org/docs/lists-and-keys.html

当您映射元素数组时：

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

对于显示图表，我建议使用https://recharts.org/