React报错：Cannot read properties of undefined (reading 'price') 求助

这个错误的核心是product_list.find()没有找到匹配的商品，返回了undefined，之后你尝试访问itemInfo.price就触发了报错。下面分几种常见情况给出解决办法：

1. 商品ID类型不匹配 #

检查cartItems的键（也就是item变量）和product_list中商品的id类型是否一致——比如一个是字符串，一个是数字。这种类型不匹配会导致find()找不到结果。

修改find的匹配条件，统一类型再比较：

let itemInfo = product_list.find((product) => String(product.id) === item);

或者如果item是字符串而product.id是数字：

let itemInfo = product_list.find((product) => product.id === Number(item));

2. 处理product_list异步加载的同步问题 #

如果product_list是通过API请求等异步方式获取的，那在数据加载完成前调用getTotalCartAmount()，product_list可能是空数组或者未定义，自然找不到对应商品。

方案一：在函数内部做防御性判断 #

直接在getTotalCartAmount里先检查数据是否就绪，并且跳过找不到的商品项：

const getTotalCartAmount = () => {
    let totalAmount = 0;
    // 先判断product_list是否有效
    if (!product_list || product_list.length === 0) return totalAmount;
    
    for (const item in cartItems) {
        if (cartItems[item] > 0) {
            let itemInfo = product_list.find((product) => String(product.id) === item);
            // 只有找到有效商品才累加金额
            if (itemInfo) {
                totalAmount += itemInfo.price * cartItems[item];
            }
        }
    }
    return totalAmount;
};

方案二：在组件层面控制调用时机 #

在使用getTotalCartAmount的组件里，先确认product_list已加载完成再计算：

// 假设product_list是状态变量
if (!product_list.length) {
    return <div>加载中...</div>;
}

const totalAmount = getTotalCartAmount();

3. 避免无效ID进入购物车 #

从源头防止问题：在添加商品到购物车的逻辑里，先验证商品ID是否存在于product_list中，拒绝无效ID：

const addToCart = (productId) => {
    const isValidProduct = product_list.some(product => String(product.id) === String(productId));
    if (!isValidProduct) {
        console.warn(`商品ID ${productId} 不存在`);
        return;
    }
    // 执行添加到购物车的逻辑
};

内容的提问来源于stack exchange，提问作者GKW Tech Soluções em TI