reactjs错误-TypeError：无法读取未定义的属性“地图”答案

【问题标题】：reactjs error- TypeError: Cannot read property 'map' of undefinedreactjs错误-TypeError：无法读取未定义的属性“地图”
【发布时间】：2021-05-21 08:52:59
【问题描述】：

import React , {useState, useEffect} from 'react'
import styles from './Statewise.css';

const Statewise = () => {

    const [data, setData]=useState([]);
     
    const getCData = async () => {
        const res = await fetch('https://api.covid19india.org/data.json');
        const actualData = await res.json();
        console.log(actualData.Statewise);
        setData(actualData.Statewise);
    }
    useEffect(() => {
       getCData();
    }, [])

    return (
        <div className="bts">
            <div className="container-fluid mt-5">
                <div className="main-heading">
                    <h1 className="mb-5">
                        <span className="font-weight-bold">INDIA COVID 19 TRACKER</span>
                    </h1>
                </div>
                <div className="table-responsive">
                    <table className="table table-hover">
                        <thead className="thead-dark">
                            <tr>
                                <th>States</th>
                                <td>Confirmed</td>
                                <td>recovered</td>
                                <td>death</td>
                                <td>active</td>
                                <td>updated</td>
                            </tr>
                        </thead>
                        <tbody>
                            {
                               data.map((curElem) => {
                                      return(
                                          <tr key={curElem.id}>
                                              <th>{curElem.state}</th>
                                              <td>{curElem.Confirmed}</td>
                                              <td>{curElem.recovered}</td>
                                              <td>{curElem.deaths}</td>
                                              <td>{curElem.active}</td>
                                              <td>{curElem.lastupdatedtime}</td>
                                          </tr>
                                      )
                                })
                            }
                        </tbody>
                        </table>
                </div>
            </div>
        </div>
    )
}
export default Statewise;

无法从 api 中提取值。

我已经尝试过 data && data.map(...这也不起作用。
我已尝试添加加载和错误方法，但未显示来自 api id 的主要数据。请提出解决方案。

【问题讨论】：

渲染在异步完成之前工作。您的数据目前为空。您需要检查数据是否存在，然后地图才能工作，例如{data && data.length > 0 && data.map((curElem)
data.json 里面有什么？
api.covid19india.org/data.json 它的 api 包含与印度各州的 covid 病例相关的信息。

标签： reactjs

【解决方案1】：

您的actualData 不包含Statewise 字段，但包含statewise（请参阅两个字段中s 的差异）

所以要解决这个问题，只需将 Statewise 替换为 statewise

const getCData = async () => {
    const res = await fetch('https://api.covid19india.org/data.json');
    const actualData = await res.json();
    setData(actualData.statewise);
}

【讨论】：

【解决方案2】：

当您在 HTML 中使用 data 时，您可以创建一个条件语句来确保您的数据已加载。

例如：


     {
                             data ?  data.map((curElem) => {
                                      return(
                                          <tr key={curElem.id}>
                                              <th>{curElem.state}</th>
                                              <td>{curElem.Confirmed}</td>
                                              <td>{curElem.recovered}</td>
                                              <td>{curElem.deaths}</td>
                                              <td>{curElem.active}</td>
                                              <td>{curElem.lastupdatedtime}</td>
                                          </tr>
                                      )
                                      : <p> No data available </p>

                                })
                            }

【讨论】：