为什么我们将购物车道具值设置为空数组？反应

Question

所以我正在学习教程。他说我们应该在道具中将购物车设置为空数组。因为我们正在检查 cart.length===0。如果我们不添加它，我们会得到一个很大的错误。但即使我删除它，我也没有收到任何错误。我想知道什么时候会出错，为什么会发生？我的购物车正在从本地文件中获取对象数组。

购物车容器

// why passing cart = [] instead of cart only
const CartContainer = ({ cart=[], total, dispatch }) => {
  if (cart.length === 0) {
    return (
      <section className="cart">
        {/* cart header */}
        <header>
          <h2>your bag</h2>
          <h4 className="empty-cart">is currently empty</h4>
        </header>
      </section>
    );
  }
  return (
    <section className="cart">
      {/* cart header */}
      <header>
        <h2>your bag</h2>
      </header>
      {/* cart items */}
      <article>
        {cart.map((item) => {
          return <CartItem key={item.id} {...item} />;
        })}
      </article>
      {/* cart footer */}
      <footer>
        <hr />
        <div className="cart-total">
          <h4>
            total <span>${total}</span>
          </h4>
        </div>
        <button
          className="btn clear-btn"
          onClick={() => dispatch({ type: CLEAR })}
        >
          clear cart
        </button>
      </footer>
    </section>
  );
};
const mapStateToProps = (store) => {
  //   return { amount: state.amount };
  const { total, cart } = store;
  return { cart, total };
};

export default connect(mapStateToProps)(CartContainer);

App.js

function App() {
  const initialState = {
      cart: cart,
      total:3,
      amount:7,
  };

const store = createStore(reducer, initialState);

减速器

export default function reducer(state, action) {

    if (action.type === CLEAR) {
        return {
            ...state, cart: []
        }
    }
    return state;
}

Answer 1

cart.length 如果你使用 javascript 会抛出一个错误，只是，它会在程序运行时抛出一个错误

you can not read property length of undefined

使用打字稿你可以做到

cart?.length

而且它会工作得很好。为防止第 1 种情况，您必须将空数组指定为默认值，因此当没有传递道具时，您确实有长度为 0 的空数组而不是 undefined

Answer 2

之所以在此处设置一个空数组，是因为您希望购物车是一个数组，如果它未定义或为空，则会抛出错误。你在这里没有收到错误是因为你有 cart = [] in props.

// why passing cart = [] instead of cart only
const CartContainer = ({ cart=[], total, dispatch }) => {

你路过cart = []。这意味着如果 cart 的值为 undefined 或 null 那么这将采用空的 [] 作为该道具的默认值。

因此，当您尝试访问 cart.length 时，它不会抛出任何错误，因为它在参数中被初始化为一个空数组 []。如果你这样做，你会得到一个错误。

const CartContainer = ({ cart, total, dispatch }) => {
if (cart.length === 0) {
    return (
      <section className="cart">
        {/* cart header */}
        <header>
          <h2>your bag</h2>
          <h4 className="empty-cart">is currently empty</h4>
        </header>
      </section>
    );
  }
....

您可以将错误处理为

...

if (cart?.length === 0) { // In case if optional chaining is not set then try if(cart && cart.length === 0)
    return (
      <section className="cart">
        {/* cart header */}
        <header>
          <h2>your bag</h2>
          <h4 className="empty-cart">is currently empty</h4>
        </header>
      </section>
    );
  }

...

为什么我们将购物车道具值设置为空数组？反应

Why did we set cart props value to empty array? React

reactjs

redux

react-redux