Obtener el siguiente error mientras se utiliza React Redux - TipoError: No se puede leer la propiedad 'id' de undefinido

Estoy trabajando en un proyecto de comercio electrónico usando React Redux, y no puedo tener mi cabeza alrededor de este error que me ha estado molestando. Estoy tratando de añadir el elemento clicado (junto con sus props como nombre, imageUrl, etc.) a la matriz cartItems a través del reductor del carrito. Creado una función para hacer la adición en utilidades y tratando de importar y utilizar que en el reductor (función añade un nuevo prop al elemento llamado cantidad para contar la frecuencia del artículo). Pero por alguna razón, la función está creando algún elemento nuevo con sólo 1 prop, cantidad cada vez, en lugar de añadir el elemento clicado con el prop añadido.

Mi código de componente de acciones -

import CartActionTypes from './cart.types';

export const toggleCartHidden = () => ({
  type: CartActionTypes.TOGGLE_CART_HIDDEN
});

export const addItem = item => ({
  type: CartActionTypes.ADD_ITEM,
  action: item
});

cart reductor -

import CartActionTypes from './cart.types';
import { addItemToCart } from './cart.utils';

const INITIAL_STATE = {
  hidden: true,
  cartItems: []
};

const cartReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case CartActionTypes.TOGGLE_CART_HIDDEN:
      return {
        ...state,
        hidden: !state.hidden
      };
    case CartActionTypes.ADD_ITEM:
      return {
        ...state,
        cartItems: addItemToCart(state.cartItems, action.payload)
      };
    default:
      return state;
  }
};

export default cartReducer;

utiles -

export const addItemToCart = (cartItems, cartItemToAdd) => {
    const existingCartItem = cartItems.find(
      cartItem => cartItem.id === cartItemToAdd.id
    );
  
    if (existingCartItem) {
      return cartItems.map(cartItem =>
        cartItem.id === cartItemToAdd.id
          ? { ...cartItem, quantity: cartItem.quantity + 1 }
          : cartItem
        )
    }
  
    return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
  };

el componente de la colección a continuación, que muestra el elemento que debe añadirse (este componente se llama al componente de visualización que mapea los datos del artículo al componente del elemento para mostrar todos los elementos). El artículo clicado debe añadirse con el prop de cantidad creado para el mismo artículo a través del reductor.

import React from 'react';
import { connect } from 'react-redux';

import CustomButton from '../custom-button/custom-button.component';
import { addItem } from '../../Redux/cart/cart.actions';

import './collection-item.styles.css';

const CollectionItem = ({ item, addItem }) => {
  const { name, price, imageUrl } = item;

  return (
    

      

      

        {name}
        {price}
      

       addItem(item)} inverted>
        Add to cart
      
    

  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItem(item))
});

export default connect(
  null,
  mapDispatchToProps
)(CollectionItem);

Colección vista previa (usos CollectionItem) -

import React from 'react';

import CollectionItem from '../collection-item/collection-item.component';

import './collection-preview.styles.css';

const CollectionPreview = ({ title, items }) => (
  

    
{title.toUpperCase()}

    

      {items
        .filter((item, idx) => idx < 4)
        .map(item => (
          
        ))}
    

  

);

export default CollectionPreview;

La captura de pantalla de error -

the error screenshot

La acción correcta (ADD_ITEM) se está activando y está capturando ese elemento clicado, pero de alguna manera no se añade a la matriz cartItems. Cualquier ayuda sería apreciada.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por bytebuster

2 Respuestas:

  • El error que estás experimentando se debe a un pequeño error en la definición de tus acciones en el componente CollectionItem. En el componente CollectionItem, estás llamando a la función addItem con el prop 'item' que es un objeto, pero según la definición de la función addItem en las acciones de carrito, debería ser pasado como 'action' en lugar de 'item'.

    Aquí está la corrección que debes realizar en el componente CollectionItem:

    jsx
 addItem(item)} inverted>
    Add to cart

    Además, asegúrate de importar correctamente el componente CustomButton en CollectionItem y de que CustomButton esté preparado para recibir la función onClick como prop.

    Una vez que hagas esta corrección, el elemento clicado debería ser añadido correctamente a la matriz cartItems a través del reductor del carrito. ¡Espero que esto te ayude a solucionar el problema!

    Respondida el Dec 18, 2020 a las 13:11 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • He revisado tu código y he identificado un par de posibles problemas que podrían estar causando el error "TypeError: Cannot read property 'id' of undefined".

    • Componente de colección:

    En el componente CollectionItem, estás intentando acceder a la propiedad item directamente en el controlador de eventos onClick:

    javascript
   
     Add to cart

    Sin embargo, addItem es una función de acción de Redux que espera recibir un objeto de acción como argumento. Debes envolver la llamada a addItem en una función anónima para crear un nuevo objeto de acción:

    javascript
   
     Add to cart

    • Función `addItemToCart`:

    En la función addItemToCart, estás intentando acceder a la propiedad id del objeto cartItemToAdd en este código:

    javascript
   const existingCartItem = cartItems.find(
     cartItem => cartItem.id === cartItemToAdd.id
   );

    Sin embargo, parece que el objeto cartItemToAdd que estás pasando a addItemToCart no tiene una propiedad id. Asegúrate de que el objeto item pasado a la acción addItem tenga una propiedad id definida.

    Solución propuesta:

    • Actualiza el componente `CollectionItem` para que llame a `addItem` correctamente:

    javascript
   
     Add to cart

    • Verifica que el objeto `item` pasado a la acción `addItem` tenga una propiedad `id` definida.

    Después de realizar estos cambios, vuelve a ejecutar tu aplicación y comprueba si el error desaparece.

    Respondida el Dec 18, 2020 a las 13:15 - por Gemini

    Votos positivos: 0 | Votos negativos: 0