如何从 React 中的 JSON 文件导入数据？

Question

我正在尝试将数据从 JSON 文件（动物列表）导入到 React 组件中。

我收到此错误：

TypeError：无法读取未定义的属性“地图”。

我不知道为什么，因为它是在我的 Animal 组件中定义的。

这是我的 json 文件：

[
    {
        "animalName":"lion",
        "animalPic": "images/lion",
        "animalSpecies": "Panthera leo",
        "animalEnclsoure": " North East side of the Zoo. ",
        "animalDescription":" Our lions are our most popular animals and it's easy to see why. They have golden coats, and the males have manes. They also have powerful legs, teeth and jaws which were used to hunt prey in the wild."
    },
    {
        "animalName":"cheetah",
        "animalPic": "images/cheetah",
        "animalSpecies": "A. jubatus",
        "animalEnclsoure": " North East side of the Zoo. Close to the lions ",
        "animalDescription":" Our Cheetahs are native from Africa. They are the fastest land animal and can reach speeds of 80mph. They are known for their spotted coats and black snouts."
    },
    {
        "animalName":"Zebra",
        "animalPic": "images/zebra",
        "animalSpecies": "Equus grevyi,E. quagga,E. zebra",
        "animalEnclsoure": " South West side of the Zoo. Close to the entrance",
        "animalDescription":" Zebras are well known because of their stripes. They are native to Africa. "
    },
    {
        "animalName":"Crocodile",
        "animalPic": "images/crocodile",
        "animalSpecies": "Crocodylidae",
        "animalEnclsoure": " North West side of the Zoo. Opposite the Lions.",
        "animalDescription":" Crocodiles native from the tropics in Africa. They are moree closley rleated to birds and dinosaurs than other reptiles. They hunt mainly at night due to their nocturnal vision. "
    }
]

这是我的动物部分：

import React from 'react';
import "../animal.css";

const animal = (props) => {
    return (
        <div className="Animal">
            <h2>{props.animalName}</h2>
            <img className="animalPic" src={props.animalPic} alt={props.aniamlName} />
            <p>Species{props.animalSpecies}</p>
            <p>Enclosure Location{props.animalEnclosure}</p>
            <p>Description:{props.animalDescription}</p>
        </div>

    )
};

export default animal;

这是我的 Zoo-Animal 组件

import React from 'react';
import Animal from './components/Animal';

const zoo = (props) => {
    return (
        <div className="Animal-output">
            {props.animals.map((animal, i) => (
                <Animal key={i} {...animal} />
            ))}
        </div>
    )
};

export default zoo;

这是我的动物页面：

import React, {useState, useEffect} from 'react'
import Header from './components/Header';
import "./App.css";
import Animal from'./components/Animal';
import Zoo_Animals from './Zoo_Animals.js'


function Animals(props) {

    const [animals, setAnimals] = useState([]);
    useEffect(() => {
        fetch("./json/animal-list.json").then(function(jresponse) {
            if(jresponse.ok) {
                jresponse.json().then(function(json) {
                    setAnimals(json);
                });
            } else {
                console.log('error' + jresponse.status + ": " + jresponse.text);
            }
        });

    });

    return(
        <div>
            <h1>Animals</h1>
            <Zoo_Animals/>
        </div>
    )
}

export default Animals;

Answer 1

看起来您只是没有将animals 传递给Zoo_Animals 组件：

<Zoo_Animals/>

由于组件期望将其作为道具，因此将其传递：

<Zoo_Animals animals={animals} />

---

还要注意，由于默认情况下数据是一个空数组：

const [animals, setAnimals] = useState([]);

那么一开始不会有任何动物。 （这是一件非常好的事情，可以防止在加载 AJAX 操作时发生同样的错误。）当 AJAX 操作完成并更新状态时，它将呈现它们。

作为学习练习，您还可以跟踪某种“正在加载”状态值，以便在 AJAX 操作发生时向用户显示加载指示器。