React购物车报错TypeError: myCart.map is not a function求助

错误原因 #

Cart组件的参数接收逻辑错误：React组件的第一个参数是props对象，你直接将参数命名为myCart，此时这个变量是包含所有传入props的对象，而非你传入的购物车数组。调用myCart.map时，实际是对props对象执行map方法，自然会抛出类型错误，而typeof(myCart)返回object也验证了这一点——因为props本身就是对象。

修复方案 #

有两种方式可以修正这个问题：

方案1：解构props提取myCart

直接从props对象中解构出myCart属性：

function Cart({ myCart }) {
  return(
    <form className="cart">
      <h2>My Cart</h2>
      <ul>
        {myCart.map((product, index) => (
          <li key={index}>
            {product.name} - Price: {product.price}
          </li>
        ))}
      </ul>
    </form>
  );
}

方案2：通过props对象访问myCart

保留props参数，通过props.myCart获取购物车数组：

function Cart(props) {
  return(
    <form className="cart">
      <h2>My Cart</h2>
      <ul>
        {props.myCart.map((product, index) => (
          <li key={index}>
            {product.name} - Price: {product.price}
          </li>
        ))}
      </ul>
    </form>
  );
}

修复后，myCart就会指向你传入的数组，map方法可以正常执行。

内容的提问来源于stack exchange，提问作者Marya