javascript - 未处理的拒绝 (TypeError):state.cartItems 未定义
问题描述
我正在关注 MERN STACK 教程,在设置我的购物车时这是我得到的错误,但是,我 console.log 在我的减速器中记录数据并且它正在显示但不知道为什么它会显示这个错误
Unhandled Rejection (TypeError): state.cartItems is undefined
还有,为什么导师是用localStorage来存储数据的,难道我们不能在获取Cart Action之后直接发给reducer吗……是怎么关联的?
谢谢你
购物车行动
import { ADD_TO_CART } from '../constants/CartConstants';
import axios from "axios";
export const addToCart = (id, qty) => async (dispatch, getState) => {
const { data } = await axios.get(`/api/products/${id}`);
dispatch({
type: ADD_TO_CART,
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 {createStore , applyMiddleware, combineReducers} from 'redux';
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension';
import {productListReducer , productDetailsReducer } from './reducers/productReducer' ;
import {cartReducer} from "./reducers/cartReducer"
const reducer = combineReducers({
productList: productListReducer,
productDetails:productDetailsReducer,
cart: cartReducer
});
const cartItemsFromStorage = localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : []
const initialState = {
cart: cartItemsFromStorage
};
const middleware = [thunk];
const store = createStore(reducer , initialState , composeWithDevTools(applyMiddleware(...middleware)))
//composite with dev tools is used to connect our store with our devtools
export default store;
推车减速器
import { ADD_TO_CART } from '../constants/CartConstants';
export const cartReducer = (state = { cartItems: [] }, action) => {
switch (action.type) {
case ADD_TO_CART:
const item = action.payload;
const existItem = state.cartItems.find((x) => x.product === item.product)
console.log(existItem)
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
}
}
解决方案
确保这与您的状态结构相匹配
localStorage.setItem('cartItems', JSON.stringify(getState().*cart.cartItems*))
如果你命名不同,它可能会改变,例如
cartReducer.cartItems
推荐阅读
- reactjs - 在 React 组件中导入时,SCSS 文件不包括 @used 文件的类
- python - “utf-8”编解码器无法解码位置 12387 中的字节 0xa0
- google-cloud-platform - Google Cloud Platform 计算错误率图表为 100%
- regex - 如何限制正则表达式中 2 个相邻字符串的总长度?
- solr - SOLR 精确搜索关闭词干提取
- python-3.x - 什么情况下过滤器可以拒绝在 Python 中工作?
- vue.js - 带有 v-for 的 srcset
- python - 为 MAC 版本 10.14.6 安装 python
- hotchocolate - 使用 Pure Code First Hot Chocolate GraphQL 的特定属性的日期类型
- javascript - Firestore 获取与值数组中的项目匹配的任何值