React中TypeError: Cannot read properties of undefined(reading 'map')问题求助

问题根源 #

你的代码存在两个核心问题：

• 状态赋值错误：你在控制台打印了actualData.statewise（这才是正确的数组数据），但调用setData时却赋值了actualData.status——目标API返回的结构中并没有名为status的数组，导致data最终变成undefined，调用map时触发错误。
• 缺少空值保护：即使修正了赋值，异步请求完成前data是初始空数组，但如果请求失败或返回数据异常，data可能变为undefined，依然会触发map错误。

解决步骤 #

1. 修正状态赋值 #

将setData(actualData.status)改为setData(actualData.statewise)，确保把API返回的正确数组存入状态：

const getCovidData = async () => {
    const res = await fetch('https://data.covid19india.org/data.json');
    const actualData = await res.json();
    console.log(actualData.statewise);
    // 修正：使用statewise而非status，同时添加空数组兜底
    setData(actualData.statewise || []);
}

2. 添加空值保护 #

在渲染时使用可选链操作符?.，确保只有data存在时才执行map：

{data?.map((currElem, ind) => {
    return (
        <tr key={ind}>
            <th>{currElem.state}</th>
            <td>{currElem.confirmed}</td>
            <td>{currElem.recovered}</td>
            <td>{currElem.deaths}</td>
            <td>{currElem.lastupdatedtime}</td>
            <td>{currElem.active}</td>
        </tr>
    )
})}

3. 可选：添加加载与错误处理（提升体验） #

增加加载状态和错误捕获，避免页面空白或无提示报错：

const Statewise = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const getCovidData = async () => {
        try {
            const res = await fetch('https://data.covid19india.org/data.json');
            if (!res.ok) throw new Error('请求失败');
            const actualData = await res.json();
            setData(actualData.statewise || []);
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    }
     
    useEffect(() => {
        getCovidData();
    }, []);

    if (loading) return <div className="text-center mt-5">加载中...</div>;
    if (error) return <div className="text-center mt-5 text-danger">错误：{error}</div>;

    return (
        // 原有渲染内容
    )
}

修改后的完整代码 #

import React, { useEffect, useState } from "react";

const Statewise = () => {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const getCovidData = async () => {
        try {
            const res = await fetch('https://data.covid19india.org/data.json');
            if (!res.ok) throw new Error('无法获取数据');
            const actualData = await res.json();
            setData(actualData.statewise || []);
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    }
     
    useEffect(() => {
        getCovidData();
    }, []);

    if (loading) return <div className="container-fluid mt-5 text-center">加载中...</div>;
    if (error) return <div className="container-fluid mt-5 text-center text-danger">错误：{error}</div>;

    return (
        <>
        <div className="container-fluid mt-5">
            <div className="main-heading">
            <h1 className="mb-5 text-center">COVID-19 Dashboard</h1>
            </div>
        
            <div className="table-responsive">
                <table className="table table-hover">
                    <thead className="thead-dark">
                        <tr>
                            <th>State</th>
                            <th>Confirmed</th>
                            <th>Recovered</th>
                            <th>Deaths</th>
                            <th>Latest</th> 
                            <th>Active</th> 
                        </tr>
                    </thead>
                    <tbody>
                    {data?.map((currElem, ind) => {
                        return (
                        <tr key={ind}>
                            <th>{currElem.state}</th>
                            <td>{currElem.confirmed}</td>
                            <td>{currElem.recovered}</td>
                            <td>{currElem.deaths}</td>
                            <td>{currElem.lastupdatedtime}</td>
                            <td>{currElem.active}</td>
                        </tr>
                        )
                    })}
                    </tbody>
                </table>
            </div>
        </div>
        </>
    )
}
export default Statewise;

内容的提问来源于stack exchange，提问作者kokom