React中使用map函数传递数组对象值时出现读取未定义错误

错误原因拆解 #

1. API返回数据类型不匹配：你提到仅传入一条数据，但如果API返回的是单个对象而非包含单个对象的数组，执行setItems(response.data)后，items会从初始数组变为对象，而对象没有map()方法，直接调用就会触发报错。
2. 子组件props接收错误：Titlecard组件直接把参数当作item，但React组件的参数是props对象，不是直接的属性值，导致无法正确读取数据；同时渲染item.firstName时未使用JSX表达式，只会显示字符串文本。

分步解决方案 #

1. 统一API数据格式为数组 #

确保items始终是数组类型，避免非数组调用map()：

import axios from "axios";
import React, { useEffect, useState } from "react";
import { Container } from "react-bootstrap";
import Titlecard from "./Titlecard";
import { HeroesUrl } from "../apiurl/HeroesApi";

const TitleHero = () => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    axios.get(HeroesUrl).then((response) => {
      // 校验数据格式，非数组则包装为数组
      const formattedData = Array.isArray(response.data) 
        ? response.data 
        : [response.data];
      setItems(formattedData);
      console.log(formattedData);
    });
  }, []);

  return (
    <>
      <Container>
        <div>
          {items.map((item) => (
            <Titlecard key={item.id} item={item} />
          ))}
        </div>
      </Container>
    </>
  );
};

export default TitleHero;

2. 修正Titlecard组件的props接收与渲染 #

import React from "react"; 
// 解构props中的item属性，正确获取传递的数据
const Titlecard = ({ item }) => {
  return (
    <>
      {/* 使用JSX表达式渲染变量，而非纯文本 */}
      <div>{item.firstName}</div>
    </>
  );
};

export default Titlecard;

可选优化：添加加载状态 #

在数据请求完成前显示加载提示，提升用户体验：

const TitleHero = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios.get(HeroesUrl)
      .then((response) => {
        const formattedData = Array.isArray(response.data) ? response.data : [response.data];
        setItems(formattedData);
      })
      .catch(err => console.error(err))
      .finally(() => setLoading(false));
  }, []);

  // 加载状态下显示提示
  if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <>
      <Container>
        <div>
          {items.map((item) => (
            <Titlecard key={item.id} item={item} />
          ))}
        </div>
      </Container>
    </>
  );
};

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