React中如何从对象列表提取name字段值？解决cardData.map不是函数的报错问题

让我们一步步拆解你的问题，找到对应的解决方案：

问题1：使用Object.keys遍历但页面无数据 #

你这段代码的核心问题是箭头函数没有显式返回JSX：

{Object.keys(cardData).map((keys)=>{
  <li>{cardData[keys].name}</li>
})}

当箭头函数用{}包裹代码块时，必须通过return语句返回要渲染的元素，否则默认返回undefined，页面自然看不到任何内容。另外补充一点：你的cardData是数组类型，完全没必要用Object.keys来遍历，直接用数组原生的map方法会更简洁直观。

问题2：cardData.map is not a function错误 #

这个错误明确说明**cardData不是数组类型**，常见触发原因有两个：

1. 初始状态设置错误：比如你把cardData的初始值设为null或undefined，而非空数组[]
2. 数据赋值错误：比如接口返回的是包裹在data字段里的对象（比如{data: [...]}），你直接把整个对象赋值给了cardData，没有提取里面的数组内容

完整解决方案 #

第一步：确保cardData是数组类型 #

如果用useState管理状态，初始值一定要设为空数组，避免数据未加载时触发map报错：

import { useState, useEffect, Fragment } from 'react';

function YourComponent() {
  // 初始化为空数组，保证map方法始终能正常调用
  const [cardData, setCardData] = useState([]);

  // 模拟从接口获取数据的场景
  useEffect(() => {
    // 假设这是你拿到的原始数据
    const rawData = [
      {"postId":1,"id":1,"name":"id labore ex et quam laborum","email":"Eliseo@gardner.biz","body":"laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"},
      {"postId":1,"id":2,"name":"quo vero reiciendis velit similique earum","email":"Jayne_Kuhic@sydney.com","body":"est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et"}
    ];
    setCardData(rawData);
  }, []);

第二步：正确使用map渲染列表 #

用数组的map方法遍历，注意要么用隐式返回（去掉{}改用()包裹JSX），要么显式写出return语句，同时必须给每个列表项添加唯一的key属性（这是React列表渲染的要求）：

return (
    <Fragment>
      <ul>
        {/* 推荐：隐式返回写法，代码更简洁 */}
        {cardData.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}

        {/* 备选：显式return写法 */}
        {/* {cardData.map((item) => {
          return <li key={item.id}>{item.name}</li>;
        })} */}
      </ul>
    </Fragment>
  );
}

关键注意事项 #

• 永远给列表项加key：React需要用它追踪列表元素的变化，避免重渲染异常，这里用item.id是最优选择（唯一且稳定）
• 初始状态设为空数组：即使数据还没加载完成，map方法也能正常执行（遍历空数组不会报错）
• 确认数据结构：如果你的原始数据是包裹在data字段里的对象，记得提取数组再赋值：setCardData(rawData.data)

内容的提问来源于stack exchange，提问作者M N Tushar