Массив объектов в состоянии Redux: не удается прочитать свойство «0» неопределенного

#reactjs #redux

#reactjs #redux

Вопрос:

Я вижу много сообщений об этом, но моя проблема сохраняется. Я изучаю множество способов манипулирования массивом с объектами при redux. Консоль.вывод журнала не определен, и в браузере я вижу «не удается прочитать свойство «0» неопределенного», это электронная коммерция

CartReducer

 import {
  GET_USUARIO_CARRITO,
  POST_USUARIO_CARRITO,
  GET_VISITANTE_CARRITO,
  POST_VISITANTE_CARRITO,
  EDITAR_VISITANTE_CARRITO,
  DELETE_CARRITO,
  PUT_CATEGORIA,
} from "../actions/ActionTypes";

const initialState = {
  CarritoCompleto: {},
  Res: {},
};

export default function carritoReducer(state = initialState, action) {
  switch (action.type) {
    case GET_USUARIO_CARRITO:
      const carrito = action.payload;
      const lineaDeOrdens = action.payload.lineaDeOrdens;
      return {
        ...state,
        CarritoCompleto: {
          ...carrito,
          lineaDeOrdens: Object.assign({}, lineaDeOrdens)
        },
      };

    case POST_USUARIO_CARRITO:
      return {
        ...state,
        Res: action.payload,
      };
    case GET_VISITANTE_CARRITO:
    //falta construir

    case DELETE_CARRITO:
      return;
    default:
      return state;
  }
}
  

CartAction

 import {
    GET_USUARIO_CARRITO,
    POST_USUARIO_CARRITO,
    GET_VISITANTE_CARRITO,
    POST_VISITANTE_CARRITO,
    EDITAR_VISITANTE_CARRITO,
    DELETE_CARRITO,
    PUT_CATEGORIA,
} from "./ActionTypes";
import axios from "axios";

//NO TOCAR - MODIFICANDO EN BASE A RUTAS


//Esta esta totalmente incompleta, 
export const getUsuarioCarrito = (usuarioId) => (dispatch) => {
  axios.get(`http://localhost:3001/usuario/${usuarioId}/cart`) //falta url
    .then((res) => {
        dispatch({
            type: GET_USUARIO_CARRITO,
            payload: res.data,
            
    });
    })
    .catch((err) => {
      dispatch(postUsuarioCarrito);
    });
};

//post a usuario
//revisar que este bien igual que las demas.
export const postUsuarioCarrito = (usuarioId) => (dispatch) => {
 axios
    .post(`http://localhost:3001/usuario/${usuarioId}/cart`)
    .then((res) => {
      dispatch({
        type: POST_USUARIO_CARRITO,
        payload: res.data,
      });

      dispatch(postUsuarioCarrito());
    })

    .catch((err) => {
      const error = err.res.data;
      dispatch(error);
    });
};

//delete carrito
export const deleteCarrito = () => (dispatch) => {
  dispatch({
    type: DELETE_CARRITO,
    payload: null,
  });
};
export default { getUsuarioCarrito, postUsuarioCarrito, deleteCarrito};
  

Корзина компонентов

 import React, { useEffect, useState } from "react";
import "./carrito.css";
import Miniprod from "./miniproduct"
import Loader from "../Loader/Loader"
import { useSelector, useDispatch, connect } from 'react-redux'
import allActions from '../../redux/actions/allActions'

export default function Carrito() {


    // ================== ESTADO REDUX ======================//
    const usuario = useSelector(state => state.usuario.id)
    const productoCarrito = useSelector(state => state.carrito.CarritoCompleto.lineaDeOrdens)
    const dispatch = useDispatch()

    // ================== ESTADO COMOPONENTES ===================== //
    const [total, setTotal] = useState(0);
    const [envio, setEnvio] = useState(0);
    const [subtotal, setSubTotal] = useState(0);
    const [listaproductos, setListaProductos] = useState({});
    const [user, setUser] = useState(0)
    const descuento = 0.8;

    console.log(Object.values(productoCarrito)) =============> I probe the error like this

    // ================== USE EFFECT ========================//
    useEffect(
         () => {
           dispatch(allActions.getUsuarioCarrito(usuario))
           dispatch(allActions.login)
        },[])
  return (
        <div>
            ...
        </div>
    )
}
  

Где ошибка? или, как можно получить доступ к массиву объектов, выполнить итерацию всего, для рендеринга post
Большое спасибо за решения!

Комментарии:

1. Измените эту строку на const productoCarrito = useSelector(state => state.carrito . CarritoCompleto)

2. @muddassir когда я изменяю эту строку, я получаю объект, но это то же самое, объект содержит массив, и в этом массиве, когда я передаю метод .map, браузер выдает ошибку.