我正在 React 中为 购物车 编写代码。这是我的代码：
product-list/index.js

import React, {Component} from "react";
import "./index.css";

export default class ProductList extends Component {
    // constructor() {
    //     super();
    // }

    render() {
        return (
            <div className="layout-row wrap justify-content-center flex-70 app-product-list">
                {this.props.products.map((product, i) => {
                    return (
                        <section className="w-30"
                                 data-testid={'product-item-' + i}
                                 key={product.id}>
                            <div className="card ma-16">
                                <img alt="Your Cart" src={product.image}
                                     className="d-inline-block align-top product-image"/>
                                <div className="card-text pa-4">
                                    <h5 className="ma-0 text-center">{product.name}</h5>
                                    <p className="ma-0 mt-8 text-center">${product.price}</p>
                                </div>
                                <div className="card-actions justify-content-center pa-4">

                                    {product.cartQuantity===0 ?
                                    <button className="x-small outlined" data-testid="btn-item-add"
                                     onClick={()=>{this.props.add(product);}}>
                                        Add To Cart
                                    </button>
                                    :
                                    <div className="layout-row justify-content-between align-items-center">
                                        <button className="x-small icon-only outlined"
                                                data-testid="btn-quantity-subtract"
                                                onClick={()=>this.props.sub(product)}>
                                            <i className="material-icons">remove</i>
                                        </button>
                                        <input type="number"
                                               disabled
                                               className="cart-quantity" data-testid="cart-quantity" value={product.cartQuantity}/>
                                        <button className="x-small icon-only outlined"
                                                data-testid="btn-quantity-add" onClick={()=>this.props.add(product)}>
                                            <i className="material-icons">add</i>
                                        </button>
                                    </div>
                                }
                                </div>
                            </div>
                        </section>
                    )
                })}
            </div>
        );
    }
}
export const UpdateMode = {
    ADD: 1,
    SUBTRACT: 0
}

cart/index.js

import React, { Component } from "react";
import "./index.css";

export default class Cart extends Component {
  render() {
    return (
      <div className="card my-16 mr-25 flex-30">
        <section className="layout-row align-items-center justify-content-center px-16">
          <h4>Your Cart</h4>
        </section>
        <div className="divider" />
        <table>
          <thead>
            <tr>
              <th></th>
              <th>Item</th>
              <th className="numeric">Quantity</th>
            </tr>
          </thead>
          <tbody>
            {this.props.cart.items.map((cartItem, idx) => {
              return (
                <tr
                  data-testid={"cart-item-" + idx}
                  key={idx + 1}
                  className="slide-up-fade-in"
                >
                  <td>{idx + 1}.</td>
                  <td className="name" data-testid="cart-item-name">
                    {cartItem.name}
                  </td>
                  <td
                    className="numeric quantity"
                    data-testid="cart-item-quantity"
                  >
                    {cartItem.cartQuantity}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

这会返回以下错误：

TypeError: Cannot read property 'map' of undefined
ProductList.render
src/components/product-list/index.js:11
8 |
9 | render() {
10 | return (
11 |
| ^ 12 | {this.props.products.map((product, i) => {
13 | return (
14 | <section className="w-30"
TypeError: Cannot read property 'map' of undefined
Cart.render
src/components/cart/index.js:20
17 | Quantity
18 |
19 |
20 |
| ^ 21 | {this.props.cart.items.map((cartItem, idx) => {
22 | return (
23 | <tr

我该如何修复此问题？