如何将数据从api转换为数组我不能使用map函数，所以我想将cart.cartItems转换为数组

Question

我想在cart.cartitems上使用map函数，但它显示错误

类型错误：cart.cartItems.map不是函数

所以我希望在将cartItems转换为数组方面得到帮助。

import React, { useState, useEffect } from 'react'
import { Button, Col, Row, ListGroup, Image, Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import Message from '../components/Message'
import CheckoutSteps from '../components/CheckoutSteps'

const PlaceOrderScreen = ({ history }) => {
const cart = useSelector(state => state.cart)
const {paymentMethod} = cart

if (!paymentMethod) {
history.push('/payment')
}
return (

<div>
<CheckoutSteps step1 step2 step3 step4 />
<Row>
<Col md={8}>
<ListGroup variant='flush'>
<ListGroup.Item>
<h2>Shipping Address</h2>
<p>
<strong>Shipping: </strong>
{cart.shippingAddress.address}, {cart.shippingAddress.city},
{' '}
{cart.shippingAddress.postalCode},
{' '}
{cart.shippingAddress.country}
</p>
</ListGroup.Item>
<ListGroup.Item>
<h2>Payment Method</h2>
<p>
<strong>Method: </strong>
{cart.paymentMethod}
</p>
</ListGroup.Item>
<ListGroup.Item>
<h2>Ordered Items</h2>
{cart.cartItems.length === 0 ? <Message variant='secondary'>
Your Cart Is Empty
</Message> :(
<ListGroup variant='flush'>
{cart.cartItems.map((item, index) => (
<ListGroup.Item key={index}>
<Row>
<Col md={2}>
<Image src={item.image} alt={item.name} fluid rounded />
</Col>
<Col>
<Link to={`/product/${item.product}`}>{item.name}</Link>
</Col>
</Row>
</ListGroup.Item>
))}
</ListGroup>
)}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={4}>
eee
</Col>
</Row>
</div>
)
}
export default PlaceOrderScreen

在此处输入图像描述

我添加了一张图片，这样你就可以看到我的cartItems是什么样子的。对不起，我是redux和javascript的新手，我有点困惑

Answer 1

在reducer中创建cartItems数组，然后可以使用spread运算符复制该数组中的所有数据。

Answer 2

我的猜测是，你试图访问购物车，而它仍然没有定义，这就是为什么你会得到这个错误，也许可以尝试放入

if(!cart) return <div> loading ... </div> 

在检查付款方式的if语句之前。