Estoy creando una aplicación de reacción con redux.
Necesito las listas de departamentos franceses para todas las páginas de mi aplicación, así que la puse en estado redux.
Despacho la acción en el componente de la aplicación en el gancho useEffect (Nota: uso otro useEffect en el componente, pero cuando la acción está en el otro bloque, tampoco funciona)
Tengo una página donde necesito usar esta lista, así que la selecciono con el gancho useSelector. Pero devuelve un objeto vacío, tengo un error que me dice que dpts.map is not a function
Creo que la acción se envía después de que se haya procesado la página, porque cuando registro la respuesta de la llamada a la API en la acción, aparece después del registro del resultado de useSelector.
Estoy usando otra propiedad estatal en otra página, pero parece funcionar con la otra página.
Aplicación.jsx
const dispatch = useDispatch(); useEffect(() => { dispatch(getDpts()); }, [dispatch])Aquí está la acción asociada con:
dpts.acciones.js
import axios from "axios"; export const GET_DPTS = "GET_DPTS"; export const getDpts = () => { return async (dispatch) => { try { const res = await axios({ method: "get", url: "https://geo.api.gouv.fr/departements", }); console.log("done : " + res) dispatch({ type: GET_DPTS, payload: res.data }); } catch (err) { (err) => console.log("DPTS FETCH ERROR --- " + err); } }; };Mapa.jsx
function DptCtl() { // Control const map = useMap(); // List of dpts and provinces const dpts= useSelector(dptsSelector); console.log(dpts); return ( <> <input type="text" list="dpt-ctl-list" placeholder="Filtrer par département"/> <datalist id="dpt-ctl-list"> {dpts.map((dpt, index) => <option value={dpt.code} key={index}>{dpt.nom}</option> )} </datalist> </> ) }Depende de cómo esté inicializando su estado en el reductor.
por ejemplo, crea un reductor con este estado inicial:
const initialState={}más tarde, en función de las acciones, el estado cambia a este:
{dpts:someDataArray} el problema es que tiene un dpts.map en algún lugar de su aplicación, ya que dpts no está undefined al principio, recibe el error de que dpts.map no es una función.
la solución a esto es simplemente poner dpts en initialState como una matriz vacía:
const initialState={dpts:[]} si ese no es el problema con su código, lo que significa que dpts no está indefinido en el estado inicial, probablemente se inicialice como una cadena o un objeto que no tiene métodos de map .