0

我已经坚持了很长一段时间了，我不能使用 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]，因为没有“工作名称”字段或“金额”字段，所以它全部按数字拆分，如我的选择正文中所示。

谢谢，

4

1 回答 1

0

我猜根本原因来自于在 React 的 fetch 中使用相同的名称并作为 QB 响应中的键。

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

<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>
于 2021-05-04T12:28:02.000 回答