无法删除商品名称且页面出现Cannot read properties of null (reading 'price') TypeError

1. 修复 "Cannot read properties of null (reading 'price')" 错误 #

这个错误的核心原因是组件初始渲染时product状态为null，此时直接访问product.id和product.price会触发类型错误。另外，当useParams获取的userid在total.order.products中找不到匹配项时，find方法返回undefined，同样会导致后续访问属性失败。

修复方案： #

• 添加条件渲染，确保只有product存在时才渲染相关内容
• 或者使用可选链操作符（?.）安全访问嵌套属性

修改后的代码如下：

import React, { useEffect ,useState} from 'react';
import PayMockup from '../PayMockup';
import { useParams } from 'react-router-dom';

export default function TotalPayMent(){
    const total = PayMockup;
    const [product, setProduct] = useState(null);
    const { userid } = useParams()

    useEffect(()=>{
        // 用===做严格相等匹配，避免类型转换问题
        const matchedProduct = total.order.products.find((product) => product.id === userid); 
        setProduct(matchedProduct)
    },[userid])

    // 初始渲染或找不到商品时，显示提示或占位内容
    if (!product) {
        return <div className='total-payment'>暂无匹配商品</div>
    }

    return(
        <div className='total-payment'>
            <p>최종 결제금액</p>
            <div className='totalpay' key={product.id}>
                <p className='price-title'>상품가격</p>
                <p className="product-price">{product.price}</p>
            </div>
        </div>
    )
}

额外优化点： #

• 移除了初始渲染时直接访问total.order.products[0].price的console.log，避免当products为空数组时触发新的错误
• 将==改为===做严格相等判断，避免因类型不一致导致的匹配错误

2. 关于"无法删除商品名称"的问题 #

当前提供的代码中没有包含商品名称删除相关的逻辑（比如删除按钮、状态更新逻辑），如果需要实现该功能，你需要：

• 在组件中添加删除操作的触发元素（比如按钮）
• 编写删除对应的状态更新逻辑，修改total.order.products或相关数据源
• 确保删除后重新匹配商品，更新product状态

内容的提问来源于stack exchange，提问作者조민성