我收到一个错误：未捕获(在承诺中)类型错误：cartItems.map 不是一个函数。组件中发生上述错误<CartScreen>：

Question

我正在学习使用react创建全栈web应用程序的mern堆栈教程，但我在cartItems.map-Uncaught(in promise(TypeError:cartItems.map不是函数。上面的错误发生在组件中：，我想这是因为一个数组，我试图使它成为数组，但它也不适用于我

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { addToCart } from '../actions/cartActions';
import MessageBox from '../components/MessageBox';
export default function CartScreen(props) {
const params = useParams();
const productId = params.id;
const {search} =useLocation();
const qtyInUrl = new URLSearchParams(search).get('qty');
const qty = qtyInUrl?Number(qtyInUrl):1;
const cart = useSelector(state => state.cart);
const  {cartItems } = cart;
const{ error} = cart;
const dispatch = useDispatch();
useEffect(() => {
if (productId) {
dispatch(addToCart(productId, qty));
}
}, [dispatch, productId, qty]);
const removeFromCartHandler = () => {
// delete action
// dispatch(removeFromCart(id));
};
const navigate=useNavigate()
const checkoutHandler = () => {
navigate('/signin?redirect=shipping');
};
return (<div className="row top">
<div className="col-2">
<h1>Shopping Cart</h1>
{error && <MessageBox variant="danger">{error}</MessageBox>}
{cartItems.length === 0 ? (
<MessageBox>
Cart is empty. <Link to="/">Go Shopping</Link>
</MessageBox>
) : (
<ul>
{cartItems.map((item) => (
<li key={item.product}>
<div className="row">
<div>
<img
src={item.image}
alt={item.name}
className="small"
></img>
</div>
<div className="min-30">
<Link to={`/product/${item.product}`}>{item.name}</Link>
</div>
<div>
<select
value={item.qty}
onChange={(e) =>
dispatch(
addToCart(item.product, Number(e.target.value))
)
}
>
{[...Array(item.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))}
</select>
</div>
<div>${item.price}</div>
<div>
<button
type="button"
onClick={() => removeFromCartHandler(item.product)}
>
Delete
</button>
</div>
</div>
</li>
))}
</ul>
)}
</div>
<div className="col-1">
<div className="card card-body">
<ul>
<li>
<h2>
Subtotal ({cartItems.reduce((a, c) => a + c.qty, 0)} items) : $
{cartItems.reduce((a, c) => a + c.price * c.qty, 0)}
</h2>
</li>
<li>
<button
type="button"
onClick={checkoutHandler}
className="primary block"
disabled={cartItems.length === 0}
>
Proceed to Checkout
</button>
</li>
</ul>
</div>
</div>
</div>
);
}

Answer 1

发生此错误是因为您的数据不是数组。.map((函数仅适用于数组。首先，您需要确认您的数据类型。其次，您需要将数据转换为数组。

您应该检查您的cartItems类型并更改您的状态以确保有一个数组。

来源：https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map