Reactjs 无法使用API调用呈现数据

我已经在这上面呆了很长时间了，我不能使用get请求，必须使用post，因为这是我能够获取字段值的唯一方法。无论我做什么，我都不能得到任何数据来渲染，现在，我看到的只是加载。。。告诉我数据是空的。但我不知道如何改变这一点。任何帮助都将不胜感激

这是使用Fetch调用QuickBase RESTful API来获取多个字段值，这些字段值仅用作折线图上的数据点。我知道这不应该这么难，但我所做的任何事情都无法呈现任何数据。使用React也可以

import React, { Component } from 'react'

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

class JobsTableApi extends Component {
  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],"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(res => res.json())
      .then( res => {
          this.setState({
            data: [],
          })
        });
      }

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

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

    return (
        <div>
          <h3>
            {data}
          </h3>
        </div>
    )
  }
}

export default JobsTableApi;

一些用户说要通过映射实现，但问题是我不知道如何使用我当前的代码。有人说使用data.value，但它是一个数组。我尝试了数据[3]，因为没有“职务名称”字段或“金额”字段，所以它都是按编号拆分的，如我的选择正文中所示

---

谢谢，

我想根本原因是在React的fetch中使用了相同的名称，并将其作为QB响应中的键

您可以通过data[data][item][6]尝试通过地图访问数据。值6是字段ID 我已经创建并测试了以下内容，它工作正常

<div id="mydiv"></div>

<script type="text/babel">

  let headers = {
    'QB-Realm-Hostname': 'XXXXXXXXXX.quickbase.com',
    'User-Agent': 'FileService_Integration_V2.1',
    'Authorization': 'QB-USER-TOKEN XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'Content-Type': 'application/json'
  };
  
  class JobsTableApi extends React.Component {
  
    constructor(props) {
      super(props);
   
      this.state = {
        data: null,
      };
    }
  
    componentDidMount() {
      this.fetchData();
    }    
  
    fetchData = () => {    
       let body = {"from":"XXXXXXXXXXX","select":[3,6,7],"sortBy":[{"fieldId":6,"order":"ASC"}],"groupBy":[{"fieldId":6,"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 =>
              <li key={item}>
                  <a> {data["data"][item][6].value} </a>
              </li>
          )}
        </ul>
      )
    }
  }


  ReactDOM.render(<JobsTableApi />, document.getElementById('mydiv'))
</script>

---

当您获取数据时，您正在将数据设置为空数组。如果我在其中放入一个数字，它只允许我显示该数字。不是该字段的值您必须将状态设置为数据，即：this.setState{data:res}我也尝试过，如果我这样做了，我会得到错误：对象作为子对象无效。找到：具有键{data，fields，metadata}的对象这是因为您在返回语句中有{data}，请尝试映射data.value或data.fieldsMichael！你真棒！这正是我需要的！现在我只需要把所有的数据转换成折线图！非常感谢你的帮助！！^^不客气