如何在 React 中從 POST API 調用中渲染數據

Question

我試圖弄清楚如何對我當前的 API 調用進行編碼，以便我可以訪問 API 調用中的每個字段並呈現它，然后能夠在多個組件中使用它。 我正在使用 QuickBase API 調用，它只允許 POST 提取字段值。 我已經退出游戲幾年了，無法通過導入 api.js 文件來弄清楚如何准確地渲染這些以便能夠在其他組件中使用。 該項目是 Electron 中的 React，用於提取 QuickBase 數據，並能夠創建折線圖（一頁上 7 個）以顯示工作成本/小時，工作包括部門成本/小時。 我所有的數據都在 quickbase 中，我只是不知道如何讓它做出反應並能夠實際使用它！

這是我的 API 電話：

let headers = {
  'QB-Realm-Hostname': 'XXXXXXXXX.quickbase.com',
  'User-Agent': 'FileService_Integration_V2.1',
  'Authorization': 'QB-USER-TOKEN XXXXXX_XXXXX_XXXXXXXXXXXXXXX',
  'Content-Type': 'application/json'
}
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 => {
  if (res.ok) {
    return res.json().then(res => console.log(res));
  }

return res.json().then(resBody => Promise.reject({status: res.status, ...resBody}));
})

.catch(err => console.log(err))

任何幫助將不勝感激，因為我已經為此苦苦掙扎了一段時間。 現在我能夠在控制台中獲取所有正確的數據。 但不知道如何在我的應用程序上渲染它以供實際使用。

謝謝！

Answer 1

我認為您應該將代碼放入 function 並從需要數據的組件中調用 function ，例如

import React, { Component } from 'react'

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

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

      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>
        {/* Do something with data */}
      </div>
    );
  }
}

export default App;

Answer 2

查看Docs ，您可以在組件的 props 中發送 JSON 來渲染它。 您可以按照此示例修改您的代碼。

沙盒

import { useEffect, useState } from "react";

async function apiCall() {
  return await new Promise((resolve, reject) => {
    // Api Call
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => resolve(json));
  });
}
const TestApp = () => {
  let [data, setData] = useState({ Text: "Before api call." });

  useEffect(() => {
    (async () => {
      let res = await apiCall();
      res.Text = "After api call.";
      setData(res);
    })();
  }, []);
  return (
    <div>
      UserId: {data.userId} &nbsp; id: {data.id} &nbsp; title: {data.title}{" "}
      &nbsp; completed: {data.completed}
    </div>
  );
};

module.exports = TestApp;