Este error me aparece cuando agrego algo al carrito de compras. He revisado el código muchas veces, pero sigo sin encontrar la solución, no sé cómo hacer que funcione.
código en cartActions.js
import axios from 'axios' import { CART_ADD_ITEM } from '../constants/cartConstants'; export const addToCart = (id, qty) => async (dispatch, getState) => { const { data } = await axios.get(`/api/products/${id}`) 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)) }código en cardReducers.js Creo que el problema viene de aquí, pero no sé exactamente dónde cambiar
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; } }código en CartScreen.js
import React, {useEffect} from 'react' import { useParams, useLocation } from 'react-router-dom'; import { useDispatch, useSelector} from 'react-redux'; import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap'; import { Message } from '../components/Message'; import { addToCart } from '../actions/cartActions'; function CartScreen() { const {prodId} = useParams() 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 (prodId) { dispatch(addToCart (prodId, qty)) } }, [dispatch, prodId, qty]) return( <div> Cart </div> ) }; export default CartScreenAquí adjunto una imagen con el error.
x es nulo, por lo que no puede acceder a la propiedad del producto en él. Simplemente use el encadenamiento opcional aquí o agregue una verificación if. Esto debería corregir el error:
const existItem = state.cartItems.find(x => x?.product === item.product)Pero no sé por qué el elemento es nulo, tal vez debería averiguarlo primero.
este es el código modificado como me dijiste, pero tengo el mismo error. Lamento molestarte pero realmente no tengo a quién preguntar. Muchas gracias por tu ayuda.
código cartReducer.js
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 => { if(x == null){ return false; }else{ return 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; } }código cartScreen.js
import React, {useEffect} from 'react' import { useParams, useLocation } from 'react-router-dom'; import { useDispatch, useSelector} from 'react-redux'; import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap'; import { Message } from '../components/Message'; import { addToCart } from '../actions/cartActions'; function CartScreen() { const {prodId} = useParams() 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 console.log('cartItems:', cartItems) useEffect(() => { if (prodId) { dispatch(addToCart (prodId, qty)) } }, [dispatch, prodId, qty]) return( <div> Cart </div> ) }; export default CartScreenEsto aparece cuando accedo a uno de los productos y hago clic en el carrito de compras para seleccionar la cantidad
Es el mismo error solo para el método del map en la línea 24. Entonces, todo lo que tiene que hacer es agregar otra declaración if para verificar si x es nulo o indefinido, como arriba.
Debe tener un aspecto como este:
return { ...state, cartItems: state.cartItems.map(x => { if (x != null) { return x.product === existItem.product ? item : x } else { return x } }) }o con encadenamiento opcional:
return{ ...state, cartItems: state.cartItems.map(x => x?.product === existItem.product ? item : x) }Todavía me pregunto por qué tu primer elemento es nulo. ¿Podría ser que inicializaste la tienda con este valor?