第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

類型錯誤:訪問購物車時無法讀取 Commerce JS 中未定義的屬性“長度”

類型錯誤:訪問購物車時無法讀取 Commerce JS 中未定義的屬性“長度”

江戶川亂折騰 2024-01-18 14:58:03
當在 commerce js 中訪問購物車對象的 line_items 數(shù)組時,我收到一條錯誤,指出它未定義,但我仍然可以在控制臺中看到它。這是一些屏幕截圖:錯誤:TypeError: Cannot read property 'length' of undefinedCartD:/Zayeed/Projects/e_commerce/src/components/Cart/Cart.jsx:7   4 |    5 | const Cart = ({ cart }) => {   6 |     const classes = useStyles();>  7 |     const isEmpty = !cart.line_items.length;   8 |    9 |     const EmptyCart = () => (  10 |         <Typography variant="subtitle1">You have no items in your cart, start adding some.</Typography我的代碼:import React from 'react'import { Container, Typography, Button, Grid } from '@material-ui/core'import useStyles from './styles';const Cart = ({ cart }) => {    const classes = useStyles();    const isEmpty = !cart.line_items.length;    const EmptyCart = () => (        <Typography variant="subtitle1">You have no items in your cart, start adding some.</Typography>    );    const FilledCart = () => {        <>            <Grid container spacing={3}>                {cart.line_items.map(item => (                    <Grid item xs={12} sm={4} key={item.id}>                        <div>{item.name}</div>                    </Grid>                ))}            </Grid>            <div className={classes.cardDetails}>                    <Typography variant="h4">Subtotal: {cart.subtotal.formatted_with_symbol}</Typography>                    <div>                        <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary">Empty Cart</Button>                        <Button className={classes.checkout} size="large" type="button" variant="contained" color="primary">Checkout</Button>                    </div>            </div>        </>    }    return (        <Container>            <div className={classes.toolbar}/>            <Typography className={classes.title} variant="h3">Your Shopping Cart:</Typography>            {isEmpty ? <EmptyCart/> : <FilledCart />}        </Container>    )}export default Cart似乎道具沒有按預(yù)期導入,我無法訪問購物車對象的任何屬性。
查看完整描述

4 回答

?
ABOUTYOU

TA貢獻1812條經(jīng)驗 獲得超5個贊

發(fā)生這種情況是因為頁面打開時購物車內(nèi)容不會立即從電子商務(wù) API 加載,然后由于錯誤而卡住了。


你可以先檢查是否有購物車內(nèi)容,然后刪除 isEmpty 變量,然后在 javascript 閉包中編寫,在幾秒鐘后的視頻中解釋,但經(jīng)過一天的掙扎,我也意識到了:D


if(!cart.line_items)

    return  '...loading';



return (

    <div className={classes.toolbar}>

        <Typography className={classes.title} variant="h3"> Your Shopping Cart 

        </Typography>

        {!cart.line_items.length ? <EmptyCart /> : <FilledCart />}

       

    </div>

)


查看完整回答
反對 回復(fù) 2024-01-18
?
繁華開滿天機

TA貢獻1816條經(jīng)驗 獲得超4個贊

嘗試 const isEmpty = Object.keys(cart).length && !cart.line_items.length; 未從服務(wù)器接收數(shù)據(jù),但組件已呈現(xiàn),這就是為什么卡一開始未定義的。



查看完整回答
反對 回復(fù) 2024-01-18
?
BIG陽

TA貢獻1859條經(jīng)驗 獲得超6個贊

嘗試使用可選鏈:

const isEmpty = !cart.line_items?.length

僅當數(shù)組存在時才會詢問數(shù)組長度,從而防止出現(xiàn)未定義的錯誤。這意味著它將返回 false ifcart.line_items == undefined或 if cart.line_items.length == 0。

也許我參加聚會有點晚了,但我陷入了同一個部分,這解決了我的問題(而且我認為它看起來很整潔)


查看完整回答
反對 回復(fù) 2024-01-18
?
慕斯709654

TA貢獻1840條經(jīng)驗 獲得超5個贊

問題 初始渲染上沒有 cart.line_items,因為初始狀態(tài)是空對象 ({})。

const [cart, setCart] = useState({});

解決方案 為初始渲染提供有效的初始狀態(tài),以便有一個真實的、已定義的 cart.line_items 對象,其中具有 length 屬性,即!cart.line_items.length; 可以解析為一個值并且不會拋出錯誤。

const [cart, setCart] = useState({ line_items: [] });


查看完整回答
反對 回復(fù) 2024-01-18
  • 4 回答
  • 0 關(guān)注
  • 246 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號