开发者问题收集

类型错误无法读取未定义的属性

2022-01-14
57

这是我声明的函数

const Cart = () => {
    const cart = useSelector((state) => state.cart);

这是函数内的部分代码:

                <Info>
                    {cart.products.map((product)=> (
                    <Product>
                        <ProductDetail>                                
                            <Image src={product.img}/>
                            <Details>
                                <ProductName>
                                    <b>Product :</b>{product.title}
                                </ProductName>
                                <ProductSize>
                                    <b>Size :</b>{product.size}
                                </ProductSize>
                            </Details>
                        </ProductDetail>
                        <PriceDetails>
                            <ProductAmountContainer>
                                <Remove/>
                                <ProductAmount>
                                    {product.inStock}
                                </ProductAmount>
                                <Add/>
                            </ProductAmountContainer>
                            <ProductPrice> 
                                <b>RM </b>{product.price*product.quantity}
                            </ProductPrice>
                        </PriceDetails>
                    </Product>
                    ))}
                    <Hr/>
                </Info>

但是,我在浏览器中收到这两个错误。

TypeError: Cannot read properties of undefined (reading 'img')

155 | {cart.products.map((product)=> (
156 | <Product>
157 |     <ProductDetail>                                
>158|         <Image src={product.img}/>
|159| ^        <Details>
160 |             <ProductName>
161 |                 <b>Product :</b>{product.title}

另一个错误:

Cart
 C:/Users/timot/OneDrive/Desktop/html css 
 projects/OmazonShop/frontend/src/pages/Cart.jsx:154
   151 |     <TopButton type = "filled">CHECKOUT NOW</TopButton>
  152 | </Top>
  153 | <Bottom>
> 154 |     <Info>
  | ^  155 |         {cart.products.map((product)=> (
  156 |         <Product>
  157 |             <ProductDetail>  

I am a bit puzzled because my product.title is working just fine.

1个回答

如果 cart.products 可用,则返回产品组件。您可以使用可选链接或检查产品是否可用,然后返回产品,否则返回加载或任何其他文本。

swimshahriar
2022-01-14