React电商Item组件报错：Cannot read properties of undefined (reading 'url')

问题原因 #

你在深层解构image对象时，没有处理中间层级可能为undefined的情况——比如image.data、image.data.attributes、image.data.attributes.formats或image.data.attributes.formats.medium任一环节不存在时，直接解构url就会抛出该错误。另外也可能是组件初始化阶段，item的image数据还未异步加载完成，导致解构失败。

解决方案 #

通过可选链操作符安全访问深层属性，搭配默认值避免报错，同时修正代码里的小错误：

修改后的完整代码 #

import { useState } from "react";
import { useDispatch } from "react-redux";
import { IconButton, Box, Typography, useTheme, Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import { shades } from "../theme";
import { addToCart } from "../state";
import { useNavigate } from "react-router-dom";

const Item = ({ item, width }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [count, setCount] = useState(1);
  const [isHovered, setIsHovered] = useState(false);
  const {
    palette: { neutral },
  } = useTheme();

  const { category, price, name, image } = item.attributes;
  // 安全获取图片URL，处理中间层级可能为undefined的情况
  const url = image?.data?.attributes?.formats?.medium?.url || '';

  return (
    <Box width={width}>
      <Box
        position="relative"
        onMouseOver={() => setIsHovered(true)}
        onMouseOut={() => setIsHovered(false)}
      >
        <img
          alt={name || 'Product'}
          width="300px"
          height="400px"
          src={url ? `http://localhost:1337${url}` : 'https://via.placeholder.com/300x400?text=No+Image'}
          onClick={() => navigate(`/item/${item.id}`)}
          style={{ cursor: "pointer" }}
        />
        <Box
          display={isHovered ? "block" : "none"} // 修正blocked为block，确保hover时正常显示
          position="absolute"
          bottom="10%"
          left="0"
          width="100%"
          padding="0 5%"
        >
          <Box display="flex" justifyContent="space-between">
            {/* AMOUNT */}
            <Box
              display="flex"
              alignItems="center"
              backgroundColor={shades.neutral[100]}
              borderRadius="3px"
            >
              <IconButton onClick={() => setCount(Math.max(count - 1, 1))}>
                <RemoveIcon />
              </IconButton>
              <Typography color={shades.primary[300]}>{count}</Typography>
              <IconButton onClick={() => setCount(count + 1)}>
                <AddIcon />
              </IconButton>
            </Box>

            {/* BUTTON */}
            <Button
              onClick={() => {
                dispatch(addToCart({ item: { ...item, count } }));
              }}
              sx={{ backgroundColor: shades.primary[300], color: "white" }}
            >
              Add to Cart
            </Button>
          </Box>
        </Box>
      </Box>

      <Box mt="3px">
        <Typography variant="subtitle2" color={neutral.dark}>
          {category
            ? category
                .replace(/([A-Z])/g, "$1 ")
                .replace(/^./, (str) => str.toUpperCase())
            : 'Uncategorized'}
        </Typography>
        <Typography>{name || 'Unnamed Product'}</Typography>
        <Typography fontWeight="bold">${price || '0.00'}</Typography>
      </Box>
    </Box>
  );
};

export default Item;

关键修改点 #

1. 可选链操作符?.：访问属性前自动检查前一个值是否为null/undefined，如果是则停止访问并返回undefined，避免抛出错误。
2. 默认值兜底：通过|| ''确保url为空时不会出现无效拼接，同时给图片、文本都添加了兜底内容，防止页面显示异常。
3. 修正display属性：把blocked改为block，解决hover时控制栏无法显示的问题。

额外建议 #

• 如果数据是异步获取的，在父组件中添加加载状态（比如骨架屏），等数据完全加载后再渲染Item组件。
• 可以给item属性添加类型约束（PropTypes/TypeScript），提前规范数据结构，从源头减少此类问题。

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