TypeError：无法读取未定义的属性（读取“请求内容”）

Question

我在我的 react 应用程序中遇到了这个问题。

TypeError：无法读取未定义的属性（正在读取“requestContent”）

我在我的应用程序中使用 commercejs。代码指向 isEmpty=!cart.line_items.length;。检查时，它显示正确的值。此外，我注意到 Api 两次返回 NULL 数组，第三次返回填充数组。为什么会这样？有人帮我解决这个问题吗？

Cart.jsx

import React from "react";
import { Container, Typography, Button, Grid } from "@material-ui/core";

import useStyles from "./CartStyles";

const Cart = ({ cart }) => {
  const classes = useStyles();
  console.log("CART ",cart.line_items); 
  const isEmpty = !cart.line_items.length;

  const EmptyCart = () => {
    <Typography variant="subtitle1">
      You donot have any item in your shopping cart. Start adding some of the
      items in your shopping cart.
    </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>
        ))}
        <div className={classes.cartDetails}>
          <Typography variant="h4">
            Subtotal: {cart.subtotal.formatted_With_symbol}
            <div>
              <Button
                className={classes.emptyButton}
                size="large"
                type="button"
                variant="contained"
                color="secondary"
              >
                Empty Cart
              </Button>
              <Button
                className={classes.checkoutButton}
                size="large"
                type="button"
                variant="contained"
                color="primary"
              >
                Checkout
              </Button>
            </div>
          </Typography>
        </div>
      </Grid>
    </>;
  };

  return (
    <Container>
      <div className={classes.toolbar} />
      <Typography className={classes.title} variant="h3">
        Your Shopping Cart
      </Typography>
      {isEmpty ? <EmptyCart /> : <FilledCart />}
    </Container>
  );
};

export default Cart;

App.js

import React, { useState, useEffect } from "react";
// import Products from "./components/Products/Products";
// import Navbar from "./components/Navbar/Navbar";\
import { commerce } from "./lib/commerce";
import { Products, Navbar, Cart } from './components';

const App = () => {
    const [products, setProducts] = useState([]);
    const [cart, setCart] = useState({});

    const fetchProducts = async() => {
        // call the product api from commerce js
        const { data } = await commerce.products.list();
        // populates the products
        setProducts(data);
    }

    //get element of cart
    const fetchCart = async() => {
        const cartItems = await commerce.cart.retrieve();
        setCart(cartItems);
    }


    const handleAddToCart = async(productId, quantity) => {
        const itemsInCart = await commerce.cart.add(productId, quantity);
        setCart(itemsInCart.cart);
    }

    useEffect(() => {
        //Calling of methods which we want to call on load of component
        fetchProducts();
        fetchCart();
    }, []);
    //  empty array is given so that it makes a call as soon as component is loaded.
    console.log(cart);
    return ( <
        div >
        <
        Navbar totalItems = { cart.total_items }
        / >   <
        Cart cart = { cart }
        /> < /
        div >
    );
};

export default App;

错误截图

Answer 1

问题

问题是由您在App 中的初始cart 状态引起的：

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

它是一个空对象 ({}) 并传递给 Cart 组件，然后假定它具有 line_items 属性。

const isEmpty = !cart.line_items.length;

由于 cart.line_items 未定义，当您尝试引用 length 属性时会引发错误。

解决方案

使用可选链接运算符来保护空访问。

const isEmpty = !cart.line_items?.length;

或保护子句/空检查

const isEmpty = !(cart.line_items && cart.line_items.length);

附加

此外，我注意到 Api 两次返回 NULL 数组并且 第三次填充数组。为什么会这样？任何人都可以帮助我 解决这个问题？

这很可能是函数组件主体中的 console.log("CART ",cart.line_items); 的组合，作为一种无意的副作用，而应用程序被渲染为一个 React.StrictMode 组件，该组件有意双重调用某些函数和组件方法两次作为帮助的一种方式您可以检测到无意的副作用。

Detecting unexpected side effects

严格模式无法自动为您检测副作用，但它 可以通过使它们更具确定性来帮助您发现它们。 这是通过有意双重调用以下函数来完成的：

• 类组件constructor、render和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps方法
• 功能组件体
• 状态更新函数（setState 的第一个参数）
• 函数传递给useState、useMemo 或useReducer