Redux 错误类型错误：无法读取未定义的属性'price'

Question

这是我的购物应用程序redux项目。我有四种产品。前两个正在添加到购物车中，但添加其余两个则抛出了一个错误，称价格尚未定义。这太令人困惑了前两个产品被添加到购物车中，但其余两个显示该错误>gt；

MY错误：

TypeError: Cannot read property 'price' of undefined
push../src/reducers/basketReducer.js.__webpack_exports__.default
C:/Users/pukar/Desktop/shopping-cart/src/reducers/basketReducer.js:43
40 | // console.log(addQuantity)  
41 | return {
42 |   basketNumbers: state.basketNumbers + 1,
> 43 |   cartCost : state.cartCost + state.products[action.payload].price,
| ^  44 |   products: {
45 |       ...state.products,
46 |       [action.payload] : addQuantity

index.js

import { combineReducers } from 'redux';
import basketReducer from './basketReducer'
export default  combineReducers({
basketState : basketReducer
});

basketReducer.js

import { ADD_PRODUCTS_BASKET, GET_NUMBERS_BASKET } from "../actions/types";
const initialState = {
basketNumbers : 0,
cartCost: 0,
products: {
Makeup : {
name: "Make Up",
price: 10.03,
numbers: 0,
inCart: false
},
Brushes : {
name: "Brushes",
price: 15.03,
numbers: 0,
inCart: false
},
NailPolish : {
name: "NailPolish",
price: 5.00,
numbers: 0,
inCart: false
},
EyeLiner : {
name: "Eye Liner",
price: 25.03,
numbers: 0,
inCart: false
}
}
}
export default(state = initialState, action) => {
switch(action.type) {
case ADD_PRODUCTS_BASKET :
let addQuantity = {...state.products[action.payload]}
addQuantity.numbers += 1;
addQuantity.inCart = true
// console.log(addQuantity)  
return {
basketNumbers: state.basketNumbers + 1,
cartCost : state.cartCost + state.products[action.payload].price,
products: {
...state.products,
[action.payload] : addQuantity
}
}
case GET_NUMBERS_BASKET :
return {
...state
}    
default: 
return state;
} 
}

cart.js

import React from 'react'
import {connect} from 'react-redux'
const Cart = ({basketProps}) => {
console.log(basketProps)

return (
<div>
<h1>Ths is the cart page</h1>
</div>
)
}
const mapStateToProps = state => ({
basketProps : state.basketState
})
export default connect(mapStateToProps ) (Cart)

addAction.js

import {ADD_PRODUCTS_BASKET} from './types'
export const addBasket = (productName) => {
return(dispatch) => {
console.log("Adding to Basket");
console.log("Product: ", productName);
dispatch({
type: ADD_PRODUCTS_BASKET,
payload: productName
})
}
}

home.js

import React, { useState } from 'react';
import p1 from '../images/1.jpeg';
import p2 from '../images/2.jpeg';
import p3 from '../images/3.jpeg';
import p4 from '../images/4.jpg';
import {connect} from 'react-redux'
import {addBasket} from '../actions/addAction'
const Home = (props) => {
console.log(props);
return (
<div className='container'>
<div className='image'>
<img src={p1} alt='Loading...' />
<h3>Makeup</h3>
<h3>$10.03</h3>
<a onClick={() => props.addBasket('Makeup')} className='addToCart cart1' href='#'>
Add to Cart
</a>
</div>
<div className='image'>
<img src={p2} alt='Loading...' />
<h3>Brushes</h3>
<h3>$15.03</h3>
<a onClick={() => props.addBasket('Brushes')}  className='addToCart cart2' href='#'>
Add to Cart
</a>
</div>
<div className='image'>
<img src={p3} alt='Loading...' />
<h3>Nail polish</h3>
<h3>$5.00</h3>
<a onClick={() => props.addBasket('Nailpolish')}  className='addToCart cart3' href='#'>
Add to Cart
</a>
</div>
<div className='image'>
<img src={p4} alt='Loading...' />
<h3>Eye Liner</h3>
<h3>$25.03</h3>
<a onClick={() => props.addBasket('Eye Liner')}  className='addToCart cart4' href='#'>
Add to Cart
</a>
</div>
</div>
);
};
export default connect(null, {addBasket}) (Home);

Answer 1

这是一个简单的错误。

您的项(对象products中属性的名称(在初始redux状态下是NailPolish，但您调用的是小写"p"的props.addBasket('Nailpolish')。

尝试调用props.addBasket('NailPolish')

第四个项也有类似的问题，一个处于redux状态的项是EyeLiner，但您调用的是props.addBasket('Eye Liner')，它的名称中有空格。

尝试呼叫props.addBasket('EyeLiner')。

---

我强烈建议用camelCase命名任何对象映射中的所有对象属性(如products(，例如nailPolish、eyeLiner。