Javascript 在渲染前等待API数据

我做了两个API调用。来自

getAllCampaign

api呈现的数据，但是对于

loadStats

来说，React似乎继续构建一个没有数据的表，因此抛出了 未捕获的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;

import React，{useState，useffect}来自“React”；
从“./helpers/coreapihelpers”导入{getAllCampaign，loadStats}；
常量表行=（）=>{
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（数据=>{setStats（数据）}）
.catch（err=>{console.log（err）}）；
}
useffect（（）=>{
loadAllCampages（）；
loadAllStats（）；
}, [])
const allData=campaiments.map？campaiments.map（（campaign，i）=>({
运动
…统计数据[i]，
}))
：空气污染指数超出上限
返回(
{allData.map？allData.map（（活动，索引）=>(
高级工程师
活动Id
活动名称
运动状态
达到
发送
交付
意见
咔哒声
退订者
{index+1}
{campaiments.campaignId}
{campaigns.campaignTitle}
{活动。活动状态}
{campaiments.data.Reach}
{campaiments.data.Sent}
{campaiments.data.Delivered}
{活动.数据.视图}
{活动.数据.单击}
{活动.数据.取消订阅者}
))：API限制超过/API令牌已断开}
);
}
导出默认表行；

您应该查看所有数据的定义与否

 {allData ? allData.map((campaigns, index) => .......}

---

我认为问题在于，您应该检查是否已填充状态

活动

，而不是

所有数据

<代码>所有数据是一个变量，而不是实际状态。实际状态应用于条件呈现。试试这个：

替换此项：

allData.map ? allData.map((campaigns, index)

为此：

campaigns ? allData.map((campaigns, index)

但是，您应该为state创建一个对象，该对象包含活动和统计信息，因为您打算将它们用作相应的项。或者，您的数据库查询应该将它们作为一个项目返回，并经过一段时间的连接

对于客户端解决方案，请尝试以下操作：

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();
}, [])

然后：

---

它的所有数据变量都包含活动数据和统计数据…所有数据变量都包含活动数据和统计数据。。。而活动状态包含活动数据，统计数据只包含stats@silencedogoody的数据，我知道这一点。这就是为什么我在回答的最后加上了警告。您需要更改数据的结构，或者将所有数据存储在一个状态对象中，或者返回一个关联的数据集。不能使用普通变量有条件地呈现状态。它必须是与国家有关的@PrashantPadDune那么我应该设置allData的值吗？@PrashantPadDune更新了可能的解决方案。问题是我不知道如何解决这个问题，我是编程新手：（而且我没有使用任何后端它是一个truepush api，我正在使用它来获取我的数据@SilenceDougood

stateObj ? stateObj.map((campaigns, index)