TypeError：无法读取购物车功能未定义的属性“数据”答案

【问题标题】：TypeError: Cannot read property 'data' of undefined for shopping cart functionalityTypeError：无法读取购物车功能未定义的属性“数据”
【发布时间】：2020-11-01 14:54:21
【问题描述】：

我不断收到此错误：TypeError：无法读取未定义的属性“数据”，当没有数据传递到我的购物车页面时。我该如何解决这个错误？理想情况下，我只希望页面显示：“此购物车是空的”。我尝试在 UserCardBlock 上方添加一个条件语句，但它没有改变任何东西。谢谢

import React, { useState } from 'react'
import { useDispatch } from 'react-redux';
import {
    removeCartItem,
    onSuccessBuy
} from '../../../_actions/user_actions';
import UserCardBlock from './Sections/UserCardBlock';
import { Result, Empty, Button } from 'antd';
import Paypal from '../../utils/Paypal';



function CartPage(props) {
    const dispatch = useDispatch();
    console.log(props)
    const [Total, setTotal] = useState(props.location.state.data.price)
    const [ShowTotal, setShowTotal] = useState(true)
    const [ShowSuccess, setShowSuccess] = useState(false)
    
    const removeFromCart = (productId) => {
        dispatch(removeCartItem(productId))
            }
        
    const transactionSuccess = (data) => {
        dispatch(onSuccessBuy({
            cartDetail: props.user.cartDetail,
            paymentData: data
        }))
            .then(response => {
                
                    setShowSuccess(true)
                    setShowTotal(false)
                }
            )
    }

    const transactionError = () => {
        console.log('Paypal error')
    }

    const transactionCanceled = () => {
        console.log('Transaction canceled')
    }
    const propductList = (data) =>{
      console.log(data)
       setTotal(data)
    }
    return (
        <div style={{ width: '85%', margin: '3rem auto' }}>
            <h1>My Cart</h1>
            <div>
        <UserCardBlock
          productData={props.location.state.data}
          removeItem={removeFromCart}
          productList={data => propductList(data)}
        />

 {ShowTotal ? (
          <div style={{ marginTop: "3rem" }}>
            <h2>Total amount: ${Total * 15} </h2>
          </div>
        ) : ShowSuccess ? (
          <Result status="success" title="Successfully Purchased Items" />
        ) : (
          <div
            style={{
              width: "100%",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <br />
            <Empty description={false} />
            <p>No Items In The Cart</p>
          </div>
        )}
      </div>

            {/* Paypal Button */}

            {ShowTotal &&
                <Paypal
                    toPay={Total}
                    onSuccess={transactionSuccess}
                    transactionError={transactionError}
                    transactionCanceled={transactionCanceled}
                />
            }
        </div>
    )
}

export default CartPage

【问题讨论】：

data=>propductList(data) 应改为()=>propductList(data)
我试图让 productList 从上传页面读取估算数据
你到底在哪里得到错误？

标签： javascript reactjs

【解决方案1】：

似乎您的组件依赖于位置状态。

const [Total, setTotal] = useState(props.location.state.data.price)

和

<UserCardBlock
   productData={props.location.state.data}

尝试使用optional chaining 和nullish coalescing

const [Total, setTotal] = useState(props.location?.state?.data?.price ?? 0)

<UserCardBlock
   productData={props.location.state?.data ?? []}

看来您使用的是 redux，所以我建议您使用 redux store 而不是位置状态。

【讨论】：