javascript - 如何在 React 中通过 POST API 调用渲染数据
问题描述
我试图弄清楚如何对我当前的 API 调用进行编码,以便我可以从 API 调用访问每个字段并呈现它,然后能够在多个组件中使用它。我正在使用仅允许 POST 提取字段值的 QuickBase API 调用。我已经退出游戏几年了,无法弄清楚如何通过导入 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))
任何帮助将不胜感激,因为我已经为此苦苦挣扎了一段时间!现在我能够在控制台中获取所有正确的数据。但不知道如何在我的应用程序上渲染它以供实际使用。
谢谢!
解决方案
查看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} id: {data.id} title: {data.title}{" "}
completed: {data.completed}
</div>
);
};
module.exports = TestApp;
推荐阅读
- python - Python integral calculator doesn't print a value
- python-3.x - 如何修复 java.net.SocketTimeoutException 引起的 MongoTimeoutException:连接超时
- android - 显示 dialogAlert 后应用失去焦点
- scala - 蛇游戏scala中的苹果位置
- sql - 在 MS SQL 中验证数据正确性的最佳实践
- node.js - 使用 nodejs 服务器设置 Vue.js
- javascript - 按特定顺序对 JS 数值数组进行排序
- laravel - Laravel 8 基于类的模型工厂
- python - 如何使用 docker 高效地输入文件
- python - 谁能告诉我如何用相同的按钮解决 python gui tkinter 但在不同的 MySQL 表中单独工作