Question

如何修复此错误 TypeError: 无法读取未定义的属性（读取“长度”）在 React js 中

2021-10-10

755

reactjs

const Cart = ({ cartItems }) => {
  return (
    <div className="cart-items">
      <div className="cart-items-header">Cart Items</div>

      {cartItems.length === 0 && (
        <div className="cart-items-empty">No items are added.</div>
      )}
    </div>
  )
}

Answer 1

看起来 cartItems 未定义。为了防止此类错误，最好检查 cartItems 是否未定义。所以尝试这个：

const Cart = ({ cartItems }) => {
  return (
    <div className="cart-items">
      <div className="cart-items-header">Cart Items</div>

      {cartItems && cartItems.length === 0 && (
        <div className="cart-items-empty">No items are added.</div>
      )}
    </div>
  )
}

Answer 2

正如 Ploppy 在一条评论中所说，这仅仅意味着 cartItems 未定义。您现在有 2 个选项

三元运算符选项：在您当前使用的同一三元运算符中，您可以在访问其长度之前检查 cartItems 是否未定义。确实，它解决了问题，但不能被视为最佳实践。

const Cart = ({ cartItems }) => {
      return (
        <div className="cart-items>
          <div className="cart-items-header">Cart Items</div>
          { cartItems && cartItems.length === 0 && (
             <div className="cart-items-empty">No items are added.</div>
          )}
        </div>
      )
}

TypeScript 选项：另一个选项是将您当前使用的代码库转换为 TypeScript 项目，以最有效的方式处理您可能遇到的类型错误。

我制作了一个简单的 CodeSandbox 来向您展示如何在您的案例中处理类型管理。 TypeScript codesandbox