我收到一个错误：未捕获（承诺）类型错误：cartItems.map 不是 function。 上述错误发生在<cartscreen>零件：</cartscreen>

Question

i am following a mern stack tutorial of creating a full stack web application using react and i got an error in cartItems.map-- Uncaught (in promise) TypeError: cartItems.map is not a function. The above error occurred in the component: , i guess it's because of an array and i have tried to make it an array but it was also not working for me

 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

This error occurs because your data is not an array. The.map() function only works with arrays. First, you'll need to confirm your data type. Second, you'll need to transform your data into an array.

You should check your cartItems type and change your state to be sure to have an array.

source: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map