无法通过 API 调用呈现数据

如何解决无法通过 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].value（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>