如何从 React 中的 POST API 调用渲染数据

如何解决如何从 React 中的 POST API 调用渲染数据

我正在尝试弄清楚如何对当前的 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))

任何帮助将不胜感激，因为我已经为此苦苦挣扎了一段时间！现在我能够在控制台中获得所有正确的数据。但不知道如何在我的应用程序上渲染它以供实际使用。

谢谢！

解决方法

我认为您应该将代码放在一个函数中，然后从需要数据的组件调用该函数，例如

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;

,

勾选Docs，可以在组件的props中发送JSON进行渲染。 您可以按照此示例修改代码。

sandbox

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;