Obtengo datos de la API usando el kit de herramientas react-redux. Quiere mostrar los datos meteorológicos de la ciudad predeterminados cuando se procesa la página, pero da un error
TypeError: no se pueden leer las propiedades de undefined (leyendo 'nombre')
Salida -> Matriz vacía de index.js que salida de API de WeatherSlice.js
export const fetchDefault = createAsyncThunk('weather/getWeather', async (selectedCity) => { const res = await axios(`http://api.weatherapi.com/v1/forecast.json?key=ebb6c0feefc646f6aa6124922211211&q=${selectedCity}&days=10&aqi=no&alerts=no `) return res.data});
<Typography className="label" variant="h5" sx={{pb:5}} component="div"> {getCity.location.name} // GivesTypeError </Typography>Componente de inicio
const getCity = useSelector((state) => state.weather.item); useEffect(() => { dispatch(fetchDefault(selectedCity)) console.log() }, [dispatch])Aplicación.js
<Switch> <Route path="/about" component={About} > <About /> </Route> <Route path="/" component={Home}> <Home /> </Route> </Switch>Tienda.js
export const store = configureStore({ reducer: { weather : weatherSlice.reducer, }, })WeatherSlice.js
export const weatherSlice = createSlice({ name: "weather", initialState : { item : [], }, reducers:{}, extraReducers:{ [fetchDefault.fulfilled]: (state , action) => { state.item = action.payload; console.log(state.item) }, [fetchDefault.pending]: (state , action) => { console.log("sadsad") } }Revisé la API que usaste ( https://api.weatherapi.com/v1/forecast.json?key=ebb6c0feefc646f6aa6124922211211&q=Istanbul&days=10&aqi=no&alerts=no ) para ver qué devuelve.
Los datos de respuesta son un objeto con campos: ubicación, actual y pronóstico.
Entonces, al principio, creo que el estado inicial de "elemento" no debe ser una matriz vacía porque api no devuelve una matriz, sino que debe ser un objeto indefinido o vacío.
Entonces, la razón principal por la que existe TypeError es que no puede recuperar datos o no puede completar el elemento en el estado. Debe verificar los datos que regresan de la API. ¿Puede recuperar con éxito los datos y llenar el estado con ellos?
Motivo de TypeError: si tiene una matriz vacía o un objeto vacío e intenta acceder a un campo a través de este elemento (como item.ubicación), no mostrará un error, pero si intenta acceder a un campo de un campo (como item. ubicación.nombre) se produce el TypeError.
También será más seguro verificar el objeto antes del componente. Me gusta:
// can be undefined comparison or getCity.length > 0 etc {getCity !== undefined && ( <Typography className="label" variant="h5" sx={{pb:5}} component="div"> {getCity.location.name} // GivesTypeError </Typography> )}