排查React中Cannot read properties of undefined (reading 'data')错误

错误根源分析 #

• Product组件props接收逻辑错误：React组件的props是单一对象，而非独立参数列表。原代码中const Product = (id, data) => {...}的写法完全错误，导致data实际为undefined，触发读取嵌套属性时的报错。
• 数据加载阶段空值未处理：API请求完成前，传递给Product组件的data可能为undefined，直接访问data.img等嵌套属性会抛出错误。

分步解决方案 #

1. 修正Product组件的props接收方式 #

将组件参数改为解构props对象的形式，正确获取传入的id和data：

const Product = ({ id, data }) => {
    // ...组件内容
};

2. 在Product组件中添加空值保护 #

使用可选链操作符?.对嵌套属性做安全访问，同时添加加载状态的兜底渲染：

const Product = ({ id, data }) => {
    // 数据未加载完成时显示占位
    if (!data) return <div className="product-card">加载中...</div>;
    
    return (
        <div className="product-card">
            <div className="thumbnail">
                <img 
                    src={process.env.REACT_APP_URL + data.img?.data?.[0]?.attributes?.url} 
                    alt="product" 
                />
            </div>
            <div className="details">
                <span className="name">{data.title}</span>
                <span className="price">₹{data.price}</span>
            </div>
        </div>
    );
};

3. 优化全局状态初始化（可选） #

在Context中给products和categories设置初始值为包含空数组的对象，避免初始状态为undefined，减少后续空值检查的复杂度：

// context.js
import { createContext, useState } from "react";

export const Context = createContext();

const AppContext = ({ children }) => {
    const [categories, setCategories] = useState({ data: [] });
    const [products, setProducts] = useState({ data: [] });

    return (
        <Context.Provider value={{
            categories,
            setCategories,
            products,
            setProducts,
        }}>
            {children}
        </Context.Provider>
    )
}

export default AppContext;

关键说明 #

• 可选链?.会在属性为null/undefined时停止访问，返回undefined而非抛出错误。
• 给状态设置初始值为{ data: [] }，可让products?.data?.map在数据加载前安全执行（空数组映射不会渲染任何元素）。

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