대응 후크를 렌더링하기 전에 API 데이터 대기

대응 후크를 렌더링하기 전에 API 데이터 대기

나는 API 전화를 두 번 한다.데이터 위치getAllCampaignapi는 다음을 위해 렌더링한다.loadStats데이터 없이 테이블을 빌드하기 위해 리액션이 진행되므로 검색되지 않은 TypeError: 정의되지 않은 속성의 '데이터'를 읽을 수 없음. 여기 내가 하는 일이 있다.

coreapi 도움말:

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;

내 생각에 문제는 네가 주정부에서 일하는지를 확인해야 한다는 것이다.campaigns인구가 밀집되어 있지 않다.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)

데이터가 정의되어 있는지 여부를 모두 확인하십시오.

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

참조URL: https://stackoverflow.com/questions/65848096/wait-for-api-data-before-render-react-hooks