Блог

Я получаю данные из API с помощью инструментария react-redux. Хотите отображать данные о погоде в городе по умолчанию при отображении страницы, но это приводит к ошибке

Ошибка типа: Не удается прочитать свойства неопределенного (чтение «имя»)

Вывод — gt; Пустой массив из index.js чем вывод API из WeatherSlice.js

 export const fetchDefault = createAsyncThunk('weather/getWeather', async (selectedCity) =gt; { const res = await axios(`http://api.weatherapi.com/v1/forecast.json?key=ebb6c0feefc646f6aa6124922211211amp;q=${selectedCity}amp;days=10amp;aqi=noamp;alerts=no `) return res.data   

});

 lt;Typography className="label" variant="h5" sx={{pb:5}} component="div"gt;  {getCity.location.name} // GivesTypeError  lt;/Typographygt;  

Домашний компонент

 const getCity = useSelector((state) =gt; state.weather.item); useEffect(() =gt; {  dispatch(fetchDefault(selectedCity))  console.log()  }, [dispatch])  

App.js

 lt;Switchgt;  lt;Route path="/about" component={About} gt;  lt;About /gt;  lt;/Routegt;  lt;Route path="/" component={Home}gt;  lt;Home /gt;  lt;/Routegt;  lt;/Switchgt;  

Store.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) =gt; {    state.item = action.payload;  console.log(state.item)  },  [fetchDefault.pending]: (state , action) =gt; {    console.log("sadsad")  } }  

Я проверил api, который вы использовали (https://api.weatherapi.com/v1/forecast.json?key=ebb6c0feefc646f6aa6124922211211amp;q=Istanbulamp;days=10amp;aqi=noamp;alerts=no), чтобы посмотреть, что он вернет.

Данные ответа-это объект с полями: местоположение, текущий и прогноз.

Поэтому сначала я думаю, что начальное состояние для «элемента» не должно быть пустым массивом, потому что api не возвращает массив, вместо этого он должен быть неопределенным или пустым объектом.

Тогда основная причина существования ошибки типа заключается в том, что вы не можете получить данные или не можете заполнить элемент в состоянии. Вы должны проверить данные, которые возвращаются из api. Можете ли вы успешно извлечь данные и заполнить ими состояние?

Причина ошибки типа: Если у вас есть пустой массив или пустой объект и вы пытаетесь получить доступ к полю через этот элемент (например, item.location), он не покажет ошибку, но если вы попытаетесь получить доступ к полю поля (например item.location.name) возникает ошибка типа.

Также проверка объекта перед компонентом будет безопаснее. Нравится:

 // can be undefined comparison or getCity.length gt; 0 etc {getCity !== undefined amp;amp; (  lt;Typography className="label" variant="h5" sx={{pb:5}} component="div"gt;  {getCity.location.name} // GivesTypeError  lt;/Typographygt; )}