React Redux中访问嵌套对象数组元素出现TypeError如何解决？

问题描述 #

从MongoDB获取的对象结构如下：

{
  brand: "OPEL",
  createdAt: "2022-12-17T17:44:31.693Z",
  image: [
      {
      public_id: 41658465461,
      url: "http://www.cloudinary.com",
      },
  ],
  licensePlate: "DR126",
  mileage: 526,
  model: "corsa",
  qrCode: "#21566",
  updatedAt: "2022-12-17T17:44:31.693Z",
  _id: "639dffff33060ff5c3c796eb",
}

尝试通过obj.image[0].url获取图片URL时，抛出TypeError: Cannot read properties of undefined (reading '0')，控制台刷新后会输出两次日志：第一次返回undefined，第二次正常返回链接。本质是组件渲染时异步数据还未加载完成，就提前访问了未初始化的属性。

解决方法 #

1. 使用可选链操作符（?.） #

直接在链式访问中添加可选链，避免某一环为undefined时抛出错误：

// 不存在对应属性时返回undefined，不会触发报错
const imageUrl = obj?.image?.[0]?.url;

// 渲染时可搭配默认值兜底
return (
  <img src={obj?.image?.[0]?.url || "默认图片地址"} alt="车辆图片" />
);

2. 条件渲染（判断数据就绪状态） #

先判断obj和image数组是否有效，再执行渲染逻辑：

// 数据未加载完成时显示占位内容
if (!obj || !obj.image || obj.image.length === 0) {
  return <div>加载中...</div>;
}

return (
  <img src={obj.image[0].url} alt="车辆图片" />
);

3. 初始化默认值 #

在声明状态时给对象和数组设置默认值，保证初始渲染时不会出现undefined：

import { useState, useEffect } from 'react';

const CarComponent = () => {
  // 给image数组设置空数组默认值
  const [carObj, setCarObj] = useState({
    image: []
  });

  useEffect(() => {
    // 模拟异步请求MongoDB数据
    const fetchCarData = async () => {
      const data = await fetch('/api/car-data').then(res => res.json());
      setCarObj(data);
    };
    fetchCarData();
  }, []);

  return (
    <img 
      src={carObj.image.length > 0 ? carObj.image[0].url : "默认图片地址"} 
      alt="车辆图片" 
    />
  );
};

4. 用useEffect监听数据变化 #

如果数据通过props传入，可监听数据更新，确保数据就绪后再处理：

import { useState, useEffect } from 'react';

const CarComponent = ({ obj }) => {
  const [imageUrl, setImageUrl] = useState("");

  useEffect(() => {
    // 当obj或image数组变化时更新图片地址
    if (obj?.image?.length > 0) {
      setImageUrl(obj.image[0].url);
    }
  }, [obj]);

  return <img src={imageUrl || "默认图片地址"} alt="车辆图片" />;
};

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