Node.js cartItems.map不是Redux中的函数_Node.js_Reactjs_Redux

Node.js cartItems.map不是Redux中的函数

node.js reactjs redux

Node.js cartItems.map不是Redux中的函数,node.js,reactjs,redux,Node.js,Reactjs,Redux,之前我遇到了一个错误，错误是我必须添加项。长度>0才能等待它。同样，我也做了类似的事情，但它显示了一个错误错误 TypeError:cartItems.map不是函数手摇筛 E:/College/DA/IWP/bookfair/frontend/src/Screens/CartPage.js:35 32 |成本 33| 34 | { >35 | cartItems.length==0？空…： |^36 | cartItems.map（书本=> 37 | 38 |

之前我遇到了一个错误，错误是我必须添加项。长度>0才能等待它。同样，我也做了类似的事情，但它显示了一个错误

错误

TypeError:cartItems.map不是函数
手摇筛
E:/College/DA/IWP/bookfair/frontend/src/Screens/CartPage.js:35
32 |成本
33|
34 | {
>35 | cartItems.length==0？空…：
|^36 | cartItems.map（书本=>
37 |         
38 |

CartPage.js

import React, { useEffect } from 'react';
import { AddToCart } from '../actions/cartActions';
import {useDispatch, useSelector} from 'react-redux';

function CartScreen(props){

    // get cart items from redux store

    const cart = useSelector(state => state.cart);

     //From cart get cartItems

    const cartItems = cart;
    console.log(cartItems);

    // Get book id, so we know what is added
    const bookId = props.match.params.id;
    const qty = props.location.search?Number(props.location.search.split("=")[1]):1;
    const dispatch=useDispatch();
    useEffect(() =>{
        if(bookId){
            dispatch(AddToCart(bookId, qty));

        }
    },[])


    return <div className="cartPage">
        {/* <div className="cartList">
            <ul className="container">
                <li> 
                    <h2>Your Cart</h2>
                    <div>Cost</div>
                </li>
                {
                    cartItems.length == 0?<div>Empty...</div>:
                    cartItems.map(book => 
                        <div >
                            <img src = {book.image} alt = {book.name}/> 
                            <div className = "Details">
                            <div>{book.name}</div>
                            <div> Quantity:
                                <select>
                                    <option value = "1">1</option>
                                    <option value = "2">2</option>
                                    <option value = "3">3</option>
                                    <option value = "4">4</option>

                                </select>
                            </div>
                        </div> 
                        <div> {book.cost}</div>  
                         </div>
                        

                        )
                }
            </ul>
            
            
        </div>
        <div className="cartButton">

        </div> */}
    </div>
}

export default CartScreen;

import React，{useffect}来自“React”；
从“../actions/cartActions”导入{AddToCart}；
从'react redux'导入{useDispatch，useSelector}；
功能屏幕（道具）{
//从redux商店获取购物车项目
const cart=useSelector（state=>state.cart）；
//从购物车获取购物车项目
const cartItems=购物车；
控制台日志（cartItems）；
//获取图书id，以便我们知道添加了什么
const bookId=props.match.params.id；
const qty=props.location.search？编号（props.location.search.split（“=”[1]）：1；
const dispatch=usedpatch（）；
useffect（（）=>{
如果（bookId）{
签派（AddToCart（bookId，数量））；
}
},[])
返回
{/* 


你的车
成本

{
cartItems.length==0？为空…：
cartItems.map（book=>
{book.name}
数量：
1.
2.
3.
4.
{book.cost}
)
}

*/}
}
导出默认屏幕；

我已经创建了一个CartPage.js，它是主屏幕，CartAction.js有这个动作，CartReducers.js

我已尝试更改所有内容，但仍然无法正确执行

，因为我可以看到您的默认redux状态是：

state={cartItems:[]}

并且您正试图使用

const cartimes=cart

访问它。您需要使用对象销毁来获取购物车项目。因为使用useSelector后的购物车是这样的：

cart={cartimes:[]}

只需更改CartPage.js并替换以下行：

const{cartimes}=cart

。让我们看看它是否有效。祝你好运@

附言：如果你想直接保存你的购物车，并将它从这个

购物车={cartItems:[]}

重新格式化为这个

购物车=[]

你应该更改你的减速机。第一步是将你的默认状态设置为

状态=[]

等等…

因为我可以看到你的默认redux状态是：

状态={cartItems:[]}