【问题标题】：Cannot find the error in React application在 React 应用程序中找不到错误
【发布时间】：2021-08-09 09:31:24
【问题描述】：

我一直在用 React 编写一个应用程序（电子商务，作为一个项目，遵循一个教程）。引用购物车对象时，我收到“TypeError：无法读取未定义的属性“长度””的错误。这是一些背景背景。我正在使用 App.js 组件顶部附近的 useState 挂钩生成购物车对象：

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

在 App.js 再往下一点，console.log 语句执行时没有错误提示购物车对象存在：

console.log(cart);

但是，当我尝试将购物车对象传递给 App.js 渲染部分中的购物车组件时，会生成上述错误（例如“TypeError: Cannot read property 'length' of undefined”）。为什么会发生这种情况，我该如何解决？

这里是 App.js 的代码

import React, { useState, useEffect } from 'react'
import { commerce } from './lib/commerce';

import { Products, Navbar, Cart } from './components';

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

    const fetchProducts = async () => {
        const { data } = await commerce.products.list();
        setProducts(data);
    }

    const fetchCart = async () => {
        setCart(await commerce.cart.retrieve());
    }

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

    useEffect(() => {
        fetchProducts();
        fetchCart();
    }, []);

    
    console.log(cart);
    return (
        <div>
            <Navbar totalItems={cart.total_items} />
            {/* <Products products={products} onAddToCart={handleAddToCart} /> */}
            <Cart cart={cart} />
        </div>
    )
}

export default App

这是我将购物车对象传递到的组件（购物车）的代码：

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

const Cart = ({ cart }) => {
    const isEmpty = !cart.line_items.length;
    const classes = useStyles();

    const EmptyCart = () => {
        <Typography variant="subtitle1">
            You have no items 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>
                    ))
                }
            </Grid>
            <div className={classes.cardDetails}>
                <Typography variant="h4">
                    Subtotal: { cart.subtotal.formatted_with_symbol }
                </Typography>
                <div>
                    <Button className={classes.emptyButton} size="large" variant="contained" type="button" color="secondary">Empty Cart</Button>
                    <Button className={classes.checkoutButton} size="large" variant="contained" type="button" 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

【问题讨论】：

嗯 cart 最初只是一个空对象。这意味着cart.line_items 将在初始渲染中未定义。因此，您会收到该错误。在 API 调用完成之前，您不应渲染购物车，跟踪请求的状态并在等待获取购物车内容时显示一些加载 UI
@Jayce444 如果是这样，我就不会打印出信息。这意味着，这不是实际问题。 fetchCart 函数实际上是在获取信息，这就是被打印出来的内容。
能否分享一下购物车对象中的数据。
您获取购物车数据的代码是异步的，正如@Jayce444 所建议的那样，它最初会使您的组件崩溃，因为const isEmpty = !cart.line_items.length; 将失败，因为它是一个空对象。你可以这样做const isEmpty = !cart.line_items || !cart.line_items.length; 来防止这种情况发生吗？
@saksh73 这是正在打印的日志：!Valid XHTML

标签： javascript reactjs

【解决方案1】：

还有另一种处理错误的方法（它解决了我的问题）。

我们只需要添加这一行：

if (!cart.line_items) return "Loading...";

然后从顶部删除变量并将其添加到 if 语句中：

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

如果内容本身就足够有意义，有时我们不需要创建变量。

代码：

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

import useStyles from "./styles";
//
//
const Cart = ({ cart }) => {
 
  //   const isEmpty = !(cart.line_items && cart.line_items.length);


  const classes = useStyles();
  //
  //So if the cart is EMPTY show the following:
  const EmptyCart = () => {
    <Typography variant="subtitle1">
      You have no items in your shopping cart, start adding some!
    </Typography>;
  };
  //
  //
  //So if the cart is FILLED show the following:
  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.checkoutButton}
            size="large"
            type="button"
            variant="contained"
            color="primary"
          >
            Checkout
          </Button>
        </div>
      </div>
    </>
  );

  //
  if (!cart.line_items) return "Loading";

  return (
    <Container>
      <div className={classes.toolbar} />
      <Typography className={classes.title} variant="h3">
        Your shopping Cart
      </Typography>
      {!cart.line_items.length ? <EmptyCart /> : <FilledCart />}

    </Container>
  );
};

export default Cart;

【讨论】：

嘿阿德里安，你也是初学者吗？，你没有发现任何错误吗？不要害羞，我们都是初学者，你知道大声笑

【解决方案2】：

问题

您的代码的问题是初始状态与您在初始渲染中访问的内容不匹配。

在App 组件中，cart 状态只是一个空对象。
```
const [cart, setCart] = useState({});
```
cart 作为 prop 传递给 Cart 组件，代码假定定义了 cart.line_items 以便访问 length 属性或 map 函数。 cart.line_items 未定义 OFC，因此尝试访问 length 属性（或 map）会抛出 TypeError: Cannot read property 'XYZ' of undefined
```
const isEmpty = !cart.line_items.length;
```
和
```
cart.line_items.map(.....
```

但是当我在 App.js 中 console.log 时，它实际上会打印出来必要的信息。

console.log(cart); 在组件的函数体中，因此它错误地将cart 状态记录为无意的副作用，它应该从useEffect 挂钩中记录，以便您查看每个渲染周期的值。这里的另一个问题是您没有访问任何嵌套属性，因此这将永远抛出错误。我愿意打赌，使用 this 代码，您至少有 1 或 2 个日志条目，它们只是空对象 ({})然后你会看到一些带有填充嵌套属性的日志。

可能的日志输出示例：

{}
{}
{ line_items: [.....], subtotal: ..... }
{ line_items: [.....], subtotal: ..... }

解决方案

关于状态记录，您应该使用useEffect 挂钩，该挂钩依赖于您正在记录的状态值。这将在初始渲染时记录 cart 状态，之后仅在更新 cart 状态值时记录。

useEffect(() => {
  console.log(cart);
}, [cart]);

对于错误，您有几个选项可以帮助您在访问 cart 状态时防止错误。

提供与渲染周期中访问的内容相匹配的有效初始状态，将line_items: [] 添加到初始cart 状态，这样cart.line_items 现在将存在并具有length 属性。
```
const [cart, setCart] = useState({ line_items: [] });
```

在传递的cart 属性上使用保护子句或可选链接。

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

或

const isEmpty = !cart.line_items?.length);

和

cart.line_items && cart.line_items.map(.....

或

cart.line_items?.map(.....

在cart.subtotal未定义的情况下也可以保护小计子状态。

<Typography variant="h4">
  Subtotal: { cart.subtotal?.formatted_with_symbol }
</Typography>

【讨论】：