Cartitems 返回一个空数组

Question

该过程涉及添加常量、操作和化简器。第一步是导入购物车、添加商品和购物车删除商品。第二步涉及设置默认值并准备第一个案例。第三步涉及检查在操作点有效负载内发回的产品是否存在。最后一步涉及创建一个名为 item 的变量并将其传递给购物车项目数组。

这是我的购物车 操作：

import axios from 'axios'
import {
  CART_ADD_ITEM,
  CART_REMOVE_ITEM,
  CART_SAVE_SHIPPING_ADDRESS,
  CART_SAVE_PAYMENT_METHOD,
} from '../constants/cartConstants'

export const addToCart = (id, qty) => async (dispatch, getState) => {
  const { data } = await axios.get(`/api/products/${productId}`)
    
  dispatch({
    type: CART_ADD_ITEM,
    payload: {
      product: data._id,
      name: data.name,
      image: data.image,
      price: data.price,
      countInStock: data.countInStock,
      qty,
    }   
  })
    
  localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems))
}

这是购物车减速器：

import {
  CART_ADD_ITEM,
} from '../constants/cartConstants'

export const cartReducer = (state = { cartItems: [] }, action) => {
  switch (action.type) {
    case CART_ADD_ITEM:
      const item = action.payload
            
      const existItem = state.cartItems.find(x => x.product  === item.product)
            
      if (existItem) {
        return {
          ...state,
          cartItems: state.cartItems.map(
            x => x.product === existItem.product ? item : x
          )
        }
      } else {
        return {    
          ...state,
          cartItems: [...state.cartItems, item]
        }
      }
    default:
      return state
  }
}

这是购物车屏幕：

import React from 'react'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { useParams, useNavigate, useSearchParams, useLocation   } from 'react-router-dom'
import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap'
import Message from '../components/Message'
import addToCart from '../actions/cartActions'
import removeFromCart from '../actions/cartActions'
 
function CartScreen() {
  const { id } = useParams()
  const productId = id

  const location = useLocation()    
  const qty = location.search ? Number(location.search.split('=')[1]) : 1    
  const dispatch = useDispatch()

  const cart = useSelector((state) => state.cart)
  const { cartItems } = cart

  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty))
    }
  }, [dispatch, productId, qty])

  return (
    <div>
      Cart
    </div>

这是store.js：

import { createStore, combineReducers, applyMiddleware } from 'redux'
// import {legacy_createStore as createStore} from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import {
    productListReducer,
    productDetailsReducer,
} from './reducers/productReducers'
import { cartReducer } from './reducers/cartReducers'

const reducer = combineReducers({
  productList: productListReducer,
  productDetails: productDetailsReducer,
  cart: cartReducer,
})

const cartItemsFromStorage = localStorage.getItem('cartItems') ?
    JSON.parse(localStorage.getItem('cartItems')) : []

const initialState = {
  cart: {
    cartItems: cartItemsFromStorage,
  },
}

const middleware = [thunk]

const store = createStore(
  reducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
)

export default store

此代码正在形成并返回

cartItems

，但它是空的。我希望

cartItems

能够获得购物车中的产品信息。

Answer 1

同样的问题在这里。 你找到解决办法了吗？