Redux Error TypeError: невозможно прочитать свойство 'price' из undefined - PullRequest
Новая
       3

Redux Error TypeError: невозможно прочитать свойство 'price' из undefined

0 голосов
/ 03 августа 2020

Это мой проект redux для приложения для покупок. У меня четыре продукта. Первые два добавляются в корзину, но добавление двух остальных вызывает ошибку, говоря, что цена не определена. Это так сбивает с толку, что первые два продукта добавляются в корзину, но остальные два показывают эту ошибку >>

MY Error: 

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
});

корзинаReducer. 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;
} 
}

корзина. 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
        })
    }
}

домой. 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);

1 Ответ

0 голосов
/ 03 августа 2020

Это простая ошибка.

Ваш элемент (имя свойства в объекте products) в исходном состоянии редукции - NailPolish, но вы вызываете props.addBasket('Nailpolish') - со строчными буквами 'p' .

Попробуйте позвонить props.addBasket('NailPolish')

Четвертый элемент имеет аналогичную проблему, элемент в состоянии redux EyeLiner, но вы вызываете props.addBasket('Eye Liner') - с пробелом в его имя.

Попробуйте позвонить props.addBasket('EyeLiner').

Я настоятельно рекомендую называть все свойства объекта на любой карте объектов (как ваш products) с помощью camelCase, например, nailPolish, eyeLiner.

...