无法从对象数组获取数据 |反应.js - openweatherAPI

Question

我使用react redux Toolkit从openweatherAPI获取数据。我可以得到名字，但当我想得到main.temp时，它会给出一个错误

type错误：无法读取未定义(读取"temp"(的属性

export const fetchDefault = createAsyncThunk('weather/getWeather', async (selectedCity) => {
const res = await axios(`https://api.openweathermap.org/data/2.5/weather?q=${selectedCity}&appid=6d735f036884219e3a12eeb6f7bf6f93`)
return res.data});

ExtraReducers

[fetchDefault.fulfilled]: (state , action) => {
state.item = action.payload;
console.log(state.item)
},

如果我return res.data.main，但这次无法获得名称，它会起作用。

index.js

const getCity  = useSelector((state) => state.weather.item);
{getCity.main.temp} // Gives Error..

数组如下所示。。

{
"weather": [
{
"id": 802,
"main": "Clouds",
"description": "scattered clouds",
}
],
"main": {
"temp": 300.15,
"pressure": 1007,
"humidity": 74,
"temp_min": 300.15,
"temp_max": 300.15
},
"wind": {
"speed": 3.6,
"deg": 160
"id": 2172797,
"name": "Cairns",
"cod": 200
}

Answer 1

您的reducer将action.payload保存到state.item中，因此我认为useSelector应该为getCity返回state.item.name(假设您希望使用该选择器访问城市名称(。

或者，您可以为state.item创建一个选择器，并通过它访问所有内容。

顺便说一句，你的reducer应该返回一个值，所以假设这个状态最初是一个对象，它应该看起来像：

[fetchDefault.fulfilled]: (state , action) => {
return {...state, item: action.payload}        
},