#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, браузер выдает ошибку.