Este es el código que se encarga de obtener datos y actualizar la lista:
import {createSlice} from "@reduxjs/toolkit"; import axios from "axios"; const initialState = { log: [] } let page = 1; const cartSlice = createSlice({ name: 'cart', initialState: initialState, reducers: { fetching: (state, payload) => { state.log = axios.get(`http://localhost:5000/fetch/?${page = payload.payload}`) // console.log(state) } } }) export const {fetching} = cartSlice.actions; export default cartSlice.reducer;Y esta es la página de inicio:
import React, {useEffect} from "react"; import {useDispatch, useSelector} from "react-redux"; import {fetching} from "../features/cardSlice"; import Cards from "./Cards"; export default function HomePage(){ const dispatch = useDispatch(); const {itemsList} = useSelector((store) => store.card) console.log(itemsList) const {pageNumber} = useSelector((store) => store.page); useEffect(()=>{ dispatch(fetching(1)); **// This is where i call dispatch to update the state and get the data** }) function cardMapper(items) { return( <Cards name = {items.name} key = {items.id} cuisine={items.cuisine} address={items.address} /> ) } return( <div> {/*{itemsList.map(cardMapper)}*/} </div> ) }Cuando ejecuto esto en localhost, no puedo obtener datos, console.log (itemList) se muestra indefinido y también el envío (buscar (1)) se llama infinitas veces.
Error no detectado: se superó la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate. React limita la cantidad de actualizaciones anidadas para evitar bucles infinitos.
No puedo entender por qué obtengo un bucle infinito y tampoco por qué no obtengo los datos.
Modifiqué tu código. Para evitar un bucle infinito al usar useEffect, debe poner [] como dependencia y para useSelector, la variable no debe encerrarse entre {}. ver el código modificado a continuación. Por lo que veo debe ser carro no tarjeta
Prueba este código en su lugar
export default function HomePage(){ const dispatch = useDispatch(); const itemsList = useSelector((store) => store.cart) console.log(itemsList) const {pageNumber} = useSelector((store) => store.page); useEffect(()=>{ dispatch(fetching(1)); **// This is where i call dispatch to update the state and get the data** },[]) function cardMapper(items) { return( <Cards name = {items.name} key = {items.id} cuisine={items.cuisine} address={items.address} /> ) } return( <div> {/*{itemsList.map(cardMapper)}*/} </div> ) }también en reductor añadir un retorno
fetching: async (state, payload) => { const newState = await axios.get(`http://localhost:5000/fetch/?${page = payload.payload}`) return newState; }Necesita dependencias agregadas como una matriz vacía. Para eliminar la línea ondulada amarilla, debe agregar despacho dentro de esa matriz de dependencias. sin embargo, reaccione para asegurarse de que las dependencias de despacho nunca cambien y que no sea responsable de volver a renderizar su componente.
useEffect(()=>{ dispatch(fetching(1)) },[dispatch])// esto debería terminar el ciclo infinito
useEffect(()=>{ dispatch(buscando(1)); // Aquí es donde llamo a dispatch para actualizar el estado y obtener los datos }, [ ])