React中出现Uncaught TypeError: 无法读取undefined的'name'属性问题

问题根源分析 #

你遇到的报错本质是数据未就绪或数据结构不匹配导致的：

• 组件渲染时，singleBeer 还处于初始状态（比如空数组/null），直接访问 singleBeer[0].name 自然会报错
• 控制台能打印目标对象，但你依然用 singleBeer[0] 去访问，说明接口返回的是单个对象而非数组，用数组下标访问自然会得到 undefined

具体修复步骤 #

1. 检查并修正数据结构匹配

先看你控制台打印的啤酒对象：如果是类似 {name: "IPA", id: 1, ...} 的单个对象，那你不需要用 [0] 下标访问。

修改状态初始化与访问方式：

// 初始状态设为 null（匹配单个对象结构）
const [singleBeer, setSingleBeer] = useState(null);

// 数据请求部分（假设用 useEffect）
useEffect(() => {
  // 替换成你的实际请求地址
  fetch(`/api/beers/${beerId}`)
    .then(res => res.json())
    .then(data => {
      console.log(data); // 确认打印的是单个对象而非数组
      setSingleBeer(data);
    });
}, [beerId]);

2. 添加条件渲染避免空值访问

无论数据结构是单个对象还是数组，都要在渲染前判断数据是否就绪：

// 单个对象的情况
return (
  <div className="single-beer">
    {singleBeer ? (
      <>
        <h1>{singleBeer.name}</h1>
        {/* 其他啤酒属性渲染 */}
      </>
    ) : (
      <div>加载中...</div>
    )}
  </div>
);

// 如果接口确实返回数组的情况
return (
  <div className="single-beer">
    {singleBeer.length > 0 ? (
      <>
        <h1>{singleBeer[0].name}</h1>
        {/* 其他啤酒属性渲染 */}
      </>
    ) : (
      <div>加载中...</div>
    )}
  </div>
);

3. 排查路由参数传递（可选）

如果以上步骤还没解决，检查 beerId 是否正确获取：

// 假设用 React Router v6
import { useParams } from 'react-router-dom';

const SingleBeer = () => {
  const { beerId } = useParams(); // 确认 beerId 是有效数值/字符串
  // ... 其他代码
};

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