javascript - 在渲染反应钩子之前等待 API 数据
问题描述
我做了两个 API 调用。来自getAllCampaign
api 的数据呈现,但loadStats
似乎 React 继续构建一个没有数据的表,因此抛出 Uncaught TypeError 的错误:无法读取未定义的属性“数据”这就是我正在做的事情。
coreapihelpers:
export const getAllCampaign = () => {
return fetch(`https://api.truepush.com/api/v1/listCampaign/1`, {
method: "GET",
headers: {
Authorization: `$TOKEN`,
"Content-Type": "application/json",
},
})
.then(response => {
return response.json()
})
.catch(err => console.log(err))
}
export const loadStats = async () => {
const ids = await getAllCampaign()
const data = Promise.all(
ids.data.map(async (i) => await (await fetch(`https://api.truepush.com/api/v1/campaignStats/${i.campaignId}`, {
method: "GET",
headers: {
Authorization: ``$TOKEN``,
"Content-Type": "application/json"
}
})).json())
)
return data
};
allData
输出在控制台上延迟
完整代码:
import React, {useState, useEffect} from 'react';
import {getAllCampaign, loadStats} from "../helpers/coreapihelpers";
const TableRow = () => {
const [campaigns, setCampaigns] = useState([]);
const [stats, setStats] = useState([]);
const loadAllCampaigns = () => {
getAllCampaign()
.then(data => { setCampaigns(data.data) })
.catch(err => { console.log(err) });
};
const loadAllStats = () => {
loadStats()
.then(data => { setStats(data) })
.catch(err => { console.log(err) });
}
useEffect(() => {
loadAllCampaigns();
loadAllStats();
}, [])
const allData = campaigns.map ? campaigns.map((campaign, i) => ({
...campaign,
...stats[i],
}))
: <h1>API LIMIT EXCEEDS</h1>
return (
<div className="container">
<div className="row">
<div className="col-xs-12">
{allData.map ? allData.map((campaigns, index) => (
<div className="table-responsive" data-pattern="priority-columns">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th>Sr. No</th>
<th>Campaign Id</th>
<th>Campaign Name</th>
<th>Campaign Status</th>
<th>Reach</th>
<th>Sent</th>
<th>Delivered</th>
<th>Views</th>
<th>Clicks</th>
<th>Unsubscribers</th>
</tr>
</thead>
<tbody>
<tr key={index}>
<td>{index + 1}</td>
<td>{campaigns.campaignId}</td>
<td>{campaigns.campaignTitle}</td>
<td>{campaigns.campaignStatus}</td>
<td>{campaigns.data.Reach}</td>
<td>{campaigns.data.Sent}</td>
<td>{campaigns.data.Delivered}</td>
<td>{campaigns.data.Views}</td>
<td>{campaigns.data.Clicks}</td>
<td>{campaigns.data.Unsubscribers}</td>
</tr>
</tbody>
</table>
</div>)) : <h1>API Limit Exceeds / API Token Broken</h1>}
</div>
</div>
</div>
);
}
export default TableRow;
解决方案
我认为问题在于您应该检查 statecampaigns
是否已填充,而不是allData
. allData
是一个变量,而不是实际状态。实际状态应用于条件渲染。试试这个:
替换这个:
allData.map ? allData.map((campaigns, index)
有了这个:
campaigns ? allData.map((campaigns, index)
但是,您应该为包含活动和统计信息的状态创建一个对象,因为您打算将它们用作相应的项目。或者,您的数据库查询应该将它们作为一个项目返回,并有一段时间的加入。
试试这个作为客户端解决方案:
const [stateObj, setObj] = useState([]);
const campaigns = [];
const stats = [];
const loadAllState = async () => {
try {
campaigns = await getAllCampaign();
} catch (err) {
console.log(err)
}
try {
stats = await loadStats();
} catch (err) {
console.log(err)
}
setObj(campaigns.map((campaign, i) => ({
...campaign,
...stats[i],
})))
};
useEffect(() => {
loadAllState();
}, [])
然后:
stateObj ? stateObj.map((campaigns, index)
推荐阅读
- php - 如何使用 laravel 6 将我的网站配置为从 http 访问到 https
- python - Django 序列化程序返回 OrderdDict 而不是 JSON
- electron - 如何将 nativefier 应用程序捆绑到单个 exe 文件和 deb 文件
- python - 有没有办法使用 python 进一步改善稀疏求解时间?
- react-native - Expo:实时获取音频数据并通过 Socket.IO 发送
- nginx - 使用 docker 将 phpMyAdmin 添加到我的 LEMP 堆栈时出现问题
- database - Oracle 数据库中的查询优化问题 - 仅获取前 1 行
- c# - 如果存在,则增加现有文件名
- html - 反应中的下载按钮
- c++ - 错误:预期一个';',构建时 Intellisense 中的错误?