React中数据获取过慢引发Cannot read properties of undefined错误求助

安全阿岳

2026-8-2

问题解决：React渲染时无法读取undefined的name属性

问题本质

你完全猜中了——组件首次渲染时，API请求还没完成，concerts初始是个空数组[]，这时候concerts[1]就是undefined，强行访问.name自然会抛出Cannot read properties of undefined (reading 'name')错误。偶尔能成功是因为API请求碰巧在组件首次渲染结束前返回了，但这种情况完全不可控。

几种可行的解决办法

条件渲染，确保数据存在再渲染
先判断数组长度是否足够，再渲染对应内容：
```
<h4>{concerts.length >= 2 ? concerts[1].name : '暂无演出信息'}</h4>
```
或者用逻辑与短路求值：
```
<h4>{concerts.length >= 2 && concerts[1].name}</h4>
```
使用可选链操作符（推荐）
ES2020及以上支持的可选链?.，会自动判断前面的对象是否存在，不存在就返回undefined，不会报错，还能加默认值优化体验：
```
<h4>{concerts[1]?.name || '暂无演出信息'}</h4>
```

添加加载状态提示
在数据未加载完成时显示加载提示，避免页面空白或报错：

export const ConcertNewest = () => {
  const [concerts, setConcerts] = useState([]);
  useEffect(() => {
    const loadConcerts = async () => {
      const response = await axios.get("/data/concerts");
      setConcerts(response.data);
    };
    loadConcerts();
  }, []);

  // 数据未加载完时显示加载中
  if (concerts.length === 0) {
    return <div>加载演出信息中...</div>;
  }

  return (
    <div> {/* 注意：<show>不是合法的HTML/React标签，建议换成div */}
      <h1>Newest concerts </h1>
      <div>
        <div className="card">
          <img src="" style={{ width: 100 }} />
          <div className="card-text">
            <h4>{concerts[1]?.name}</h4>
          </div>
        </div>
      </div>
    </div>
  );
};