React组件渲染异常及data.map() is not a function错误解决

我通过接口获取数据，该接口返回一个数组，想要对这个数组执行map操作。但fetch的默认返回值是一个空对象，尝试修改fetch默认值后依旧无效，找不到修复代码的方案。

编辑
已修复，问题本质是子组件读取props的方式有误。

原代码 #

import { useState, useRef, useMemo, createRef, useEffect } from "react";
import { Button } from "react-bootstrap";
import TinderCard from "react-tinder-card";
import { AnimalCard } from "../AnimalCard";
import { useFetch } from "../../../hooks/useFetch";

import "./index.css";

export const AnimalStack = () => {
  const { data: animals } = useFetch("animal-adp/"); // 默认返回 {}

  const [animals, setAnimals] = useState([]);
  
  useEffect(()=> {
    if (Array.isArray(data)) {
      setAnimals([...data])
    }
  },[])
 // 此处省略无关代码

 
  return (
    <>
      <div
        className="d-flex justify-content-center w-100"
        style={{ height: "80vh" }}
      >
        {animals.length > 0 ? (
          animals.map((animal, index) => (
            <TinderCard
              className="animal-card"
              ref={childRefs[index]}
              key={animal.id}
              onSwipe={(dir) => swiped(dir, animal.name, index)}
              onCardLeftScreen={() => outOfFrame(animal.name, index)}
            >
              {console.log(animal)}
              <AnimalCard character={animal} />
            </TinderCard>
          ))
        ) : (
          <div>algo</div>
        )}
      </div>
      <div className="m-2 p-1 rounded-2 w-100 d-flex flex-wrap flex-shrink-0 justify-content-center align-items-center gap-2">
        <Button onClick={() => swipe("left")}>Izquierda</Button>
        <Button onClick={() => swipe("right")}>Derecha</Button>
      </div>
    </>
  );
}

修改后的代码 #

import { useState, useRef, useMemo, createRef } from "react";
import { Button } from "react-bootstrap";
import TinderCard from "react-tinder-card";
import { AnimalCard } from "../AnimalCard";
import { useFetch } from "../../../hooks/useFetch";

import "./index.css";

export const AnimalStack = () => {
  const { loading, error, data: animals } = useFetch("animal-adp/");

  return (
    <>
      <div
        className="d-flex justify-content-center w-100"
        style={{ height: "60vh" }}
      >
        {animals?.length > 0 && // 此处修改
          animals.map((animal, index) => (
          <TinderCard
            className="animal-card"
            ref={childRefs[index]}
            key={animal.nombre}
            onSwipe={(dir) => swiped(dir, animal.name, index)}
            onCardLeftScreen={() => outOfFrame(animal.name, index)}
          >
            <AnimalCard {...animal} />// 此处修改 - 问题出在这个子组件内部
          </TinderCard>
        ))}
      </div>
      <div className="m-2 p-1 rounded-2 w-100 d-flex flex-wrap flex-shrink-0 justify-content-center align-items-center gap-2">
        <Button onClick={() => swipe("left")}>Izquierda</Button>
        <Button onClick={() => swipe("right")}>Derecha</Button>
      </div>
    </>
  );
};

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