React组件<img>标签出现TypeError: Cannot read properties of undefined (reading '0')错误

报错原因 #

报错TypeError: Cannot read properties of undefined (reading '0')出现在<img>标签，是因为部分items对象中**links属性不存在或为undefined**，直接访问items.links[0]时，相当于对undefined执行下标访问操作，触发错误。另外代码中items.data[0].title也存在同样风险——若data不存在或为空数组，也会抛出类似错误。

修复方案 #

给所有可能为undefined的嵌套属性添加可选链操作符?.，确保只有当前属性存在时才继续访问下一层，同时可添加兜底值避免空内容：

import React from 'react';

const DataPage = ({ Data }) => {
  const dataList = Data;
  console.log(dataList);

  return (
    <div className='card'>
      <ul className='card-container'>
        {dataList && dataList.length > 0 ? (
          dataList.map((items) => (
            <li key={items?.data?.[0]?.nasa_id || items.id || Math.random()}>
              {/* 给links层级加可选链，同时设置默认图片地址 */}
              <img 
                src={items?.links?.[0]?.href || 'https://via.placeholder.com/150'} 
                alt={items?.data?.[0]?.title || '加载失败'} 
              />
              {/* 给data层级加可选链，设置默认标题 */}
              <p>{items?.data?.[0]?.title || '无标题'}</p>
            </li>
          ))
        ) : (
          <p>No data available</p>
        )}
      </ul>
    </div>
  )
}

export default DataPage

额外优化建议 #

• 可以添加条件渲染，当图片链接不存在时不渲染<img>标签，避免无效加载：

{items?.links?.[0]?.href && (
  <img src={items.links[0].href} alt={items?.data?.[0]?.title || '图片'} />
)}

• 给key设置兜底值，避免因nasa_id不存在导致key为undefined，影响React渲染性能。

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