Tengo el siguiente código: characterActions.js
export const getCharacters = () => async(dispatch) => { try { dispatch({ type: FETCH_CHARACTERS_REQUEST }) const { data } = await axios.get('https://rickandmortyapi.com/api/character') dispatch({ type: FETCH_CHARACTERS_SUCCESS, payload: data }) } catch (error) { dispatch({ type: FETCH_CHARACTERS_FAIL, payload: 'error' }) } }characterReducers.js
import { FETCH_CHARACTERS_REQUEST, FETCH_CHARACTERS_SUCCESS, FETCH_CHARACTERS_FAIL, } from '../actions/characters/characterConstants' export const characterListReducer = (state = { characters: {} }, action) => { switch(action.type) { case FETCH_CHARACTERS_REQUEST: return { loading: true, characters: [] } case FETCH_CHARACTERS_SUCCESS: return { loading: false, characters: action.payload } case FETCH_CHARACTERS_FAIL: return { loading: false, error: action.payload } default: return state; } }y HomeScreen.js donde quiero mostrar los caracteres obtenidos
const HomeScreen = () => { const dispatch = useDispatch() const charactersList = useSelector(state => state.charactersList) const { loading, error, characters } = charactersList console.log(characters.results) useEffect(() => { dispatch(getCharacters()) }, [dispatch]) return ( <div> {characters.results.map((character) => { <h1 key={character.id}>{character.name}</h1> })} </div> ) }Cuando entro en el navegador, sigo recibiendo ** TypeError: no se pueden leer las propiedades de undefined (leyendo 'mapa') **
Estoy tratando de obtener datos de la API de Rick and Morty.
¡Gracias chicos!
Significa que characters.results no es una matriz.
¿Qué muestra cuando console.log(characters.results) ?
Es posible que los characters de error sean una matriz vacía. Para mayor seguridad, puede usar ||[] o simplemente devolver una matriz en blanco.
export const characterListReducer = (state = { characters: {} }, action) => { switch(action.type) { case FETCH_CHARACTERS_REQUEST: return { loading: true, characters: [] } case FETCH_CHARACTERS_SUCCESS: return { loading: false, characters: action.payload || [] } // here, in case null data. case FETCH_CHARACTERS_FAIL: return { loading: false, error: action.payload, characters:[] } // here, on error default: return state; } }Agregar verificación antes de realizar un bucle en caso de error
const HomeScreen = () => { const dispatch = useDispatch(); const charactersList = useSelector((state) => state.charactersList); const { loading, error, characters } = charactersList; useEffect(() => { dispatch(getCharacters()); }, [dispatch]); return ( <div> {loading ? ( <p>Loading please wait...</p> ) : error ? ( <strong>There is error while fetching data, {error}</strong> ) : ( characters.results.map((character) => { <h1 key={character.id}>{character.name}</h1>; }) )} </div> ); };/// Código actualizado:
const { data } = await axios.get('https://rickandmortyapi.com/api/character') dispatch({ type: FETCH_CHARACTERS_SUCCESS, payload: data.results // use results instead to make it consistent with above assign })/// Pantalla de inicio
// remove results now characters.map((character) => { <h1 key={character.id}>{character.name}</h1>; })