响应 API 调用 QuickBase 以选择 LineCharts 的多个数据点

如何解决响应 API 调用 QuickBase 以选择 LineCharts 的多个数据点

我一直在努力获取此数据集并能够跨多个组件显示。截至目前，我有 6 个不同的组件可以在 React 应用程序中从 Chart.js 生成折线图。我正在尝试完成来自 quickbase RESTful API 的 API 调用以调用 2 个不同的表并从每个表中获取字段列表，因此，我的结构中有 2 个文件，其中包含对每个表的这 2 个不同的 api 调用。我希望我能够成功完成这些 api 调用，并能够根据需要实际呈现数据，以便能够在所有这些图表上使用。有没有人可以帮我解决这个问题？已经坚持了一段时间了......这是我到目前为止的 API 调用。

import React,{ Component } from 'react'

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

class JobsTableApi extends Component {
  state = {
    data: [],}

  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],"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 => {
      if (response.ok) {
        return response.json().then(res => {
          this.setState({
            data: [],})
        });
      }

      return response.json().then(resBody => Promise.reject({status: response.status,...resBody}));
    }).catch(err => console.log(err))
  }

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

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

    return (
      <div>
        {data.jobname}
      </div>
    );
  }
}

export default JobsTableApi;

所以最终我试图选择“选择”部分中提到的所有字段，以便能够根据需要分配给折线图。我在这里做错了什么，我无法渲染任何东西？？这个想法是我们的 quickbase 是用于项目管理的，所以页面上的 1 个折线图将是一个“总计”，而其他则是该工作中包含的部门，它们都是相关的，并且数据都在 quickbase 和在我的控制台中，但我不知道如何让这一切正确呈现，以便我可以创建折线图并根据作业名称循环结果。

现在我也不确定如何调用每个字段名称，因为 json 是这样的：数据：0、3、18

0 = 该职位的所有信息，3 = 将是具有职位名称的实际字段，18 = 部门名称......等

我的想法是在一页上显示所有这些折线图，显示工作的总数，以及每个部门的总数，然后设置一个计时器，使用滑块库或类似的东西循环浏览所有工作

到目前为止，我正在尝试弄清楚如何编写代码以便能够选择特定字段并在折线图组件中使用它们。

任何帮助将不胜感激！

谢谢！