ReactJS 中 API 限制超出时的错误处理答案

【问题标题】：Error handling while api limit exceeds in ReactJSReactJS 中 API 限制超出时的错误处理
【发布时间】：2021-04-26 18:16:30
【问题描述】：

我是 ReactJs 新手，这是从 truepush api 获取数据的代码。

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))
}

这个 api 有限制，一旦超过限制，它就会在这个地方显示“campaigns.map not a function”的错误：

    const allData = campaigns.map((campaign, i) => ({
        ...campaign,
        ...stats[i].data
    }));

这是我的完整代码：

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((campaign, i) => ({
        ...campaign,
        ...stats[i].data
    }));

    console.log(allData);

    return (
        <div className="container">
            <div className="row">
                <div className="col-xs-12">
                    <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>
                            {allData.map(
                                (
                                    {
                                        campaignId,
                                        campaignTitle,
                                        campaignStatus,
                                        Reach,
                                        Sent,
                                        Delivered,
                                        Views,
                                        Clicks,
                                        Unsubscribers
                                    },
                                    index
                                ) => (
                                    <tr key={index}>
                                        <td>{index + 1}</td>
                                        <td>{campaignId}</td>
                                        <td>{campaignTitle}</td>
                                        <td>{campaignStatus}</td>
                                        <td>{Reach}</td>
                                        <td>{Sent}</td>
                                        <td>{Delivered}</td>
                                        <td>{Views}</td>
                                        <td>{Clicks}</td>
                                        <td>{Unsubscribers}</td>
                                    </tr>
                                )
                            )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default TableRow;

当api限制超过或无法获取数据时，我如何显示一个简单的h1标签说限制超过？

【问题讨论】：

使用conditional rendering。喜欢{ campaign.map ? campaign.map(...) : <h1>oopsie</h1>}
@ChrisG 我试过这个const allData = campaigns.map ? campaigns.map((campaign, i) => ({ ...campaign, ...stats[i].data })) : <h1>hi</h1> 但后来 TypeError: allData.map is not a function
是的，因为如果超过 API 限制，allData 现在是<h1>hi</h1>。您可以将映射从主 JSX 移动到设置 allData 的代码中，然后只需在 JSX 中使用 {allData}。这样您就不必检查两次。否则你将再次需要{allData.map ? allData.map(...) : allData}

标签： javascript reactjs error-handling

【解决方案1】：

campaigns.map not a function 基本上这个错误意味着你的活动没有保存任何数据或数组数据来映射它。 您可以通过安慰和调试来检查。

由于 api 给出 error ，您可以采取错误状态并在 promise 解决时检查响应是否成功，如果没有，则将 error 设置为 true 并且在活动中它将是 [] 所以，使用 @ 987654322@ 链接属性以检查活动是否为空，如果不是，则搜索其密钥

  const allData = campaigns?.map((campaign, i) => ({
    ...campaign,
    ...stats[i].data
}));

并作为组件放置条件语句的回报：

    return allData ?
        <div className="container">
            <div className="row">....
        :<div>ERROR</div>

【讨论】：

如果链接不起作用，请尝试检查 (campaign.length >0) ？获取表格：在浏览器上显示错误消息。