ReactJS电商网站开发报错：Cannot read properties of undefined (reading 'image')

问题说明 #

使用ReactJS开发电商网站时，创建商品页面出现Cannot read properties of undefined (reading 'image')错误，尝试修改{product}、检查shopCategory后仍未解决，页面无法正常显示。

相关代码 #

ProductDisplay.jsx #

import React from "react";
import './ProductDisplay.css';
import star_icon from '../assets/star_icon.png';
import star_dull_icon from '../assets/star_dull_icon.png';

const ProductDisplay = (props) => {
    const {product} = props;
    return (
        <div className="productdisplay">
            <div className="productdisplay-left">
                <div className="productdisplay-img-list">
                    <img src={product.image} alt="" />
                    <img src={product.image} alt="" />
                    <img src={product.image} alt="" />
                    <img src={product.image} alt="" />
                </div>
                <div className="productdisplay-img">
                    <img className="productdisplay-main-img" src={product.image} alt="" />
                </div>
            </div>
            <div className="productdisplay-right">
                <h1>{product.name}</h1>
                <div className="productdisplay-right-star">
                    <img src={star_icon} alt="" />
                    <img src={star_icon} alt="" />
                    <img src={star_icon} alt="" />
                    <img src={star_icon} alt="" />
                    <img src={star_dull_icon} alt="" />
                    <p>(122)</p>
                </div>
            </div>
        </div>
    );
}

export default ProductDisplay;

ShopContext.jsx #

import React, {createContext} from "react";
import all_products from "../components/assets/all_products";


export const ShopContext = createContext(null);

const ShopContextProvider = (props) => {

    const contextValue = {all_products};

    return(
        <ShopContext.Provider value={contextValue}>
            {props.children}
        </ShopContext.Provider>
    )
}

export default ShopContextProvider;

报错信息 #

Cannot read properties of undefined (reading 'image')
TypeError: Cannot read properties of undefined (reading 'image')
at ProductDisplay (http://localhost:3000/static/js/bundle.js:1864:24)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:28709:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:31993:17)
at beginWork (http://localhost:3000/static/js/bundle.js:33289:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:18305:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:18349:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:18406:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:38270:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:37518:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:37441:9)

解决方案 #

• 确保props正确传入：检查渲染ProductDisplay的父组件，确认已正确传递product属性，例如：<ProductDisplay product={selectedProduct} />。如果product是异步获取（比如接口请求）或从数组中筛选的结果，要保证传递时该值已存在。

• 添加空值保护：在ProductDisplay组件中先判断product是否存在，避免直接访问其属性。可以用两种方式：

  1. 条件渲染占位内容：

     const ProductDisplay = (props) => {
         const {product} = props;
         if (!product) {
             return <div>加载中...</div>; // 或自定义占位组件
         }
         // 原渲染逻辑
     }
     

  2. 使用可选链操作符?.（ES2020+）：

     <img src={product?.image} alt="" />
     <h1>{product?.name}</h1>
     

• 检查Context数据的使用：如果product来自ShopContext的all_products数组，确保已正确筛选出单个商品对象。例如在父组件中：

  import { useContext } from 'react';
  import { ShopContext } from './ShopContext';
  
  const ParentComponent = () => {
      const { all_products } = useContext(ShopContext);
      // 假设通过productId获取目标商品，确保productId对应存在的商品
      const selectedProduct = all_products.find(item => item.id === productId);
      return <ProductDisplay product={selectedProduct} />;
  }
  

• 验证数据源结构：确认all_products中的每个商品对象都包含image、name等必填属性，没有缺失或值为undefined的情况。

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