TypeError： 無法讀取未定義的屬性 (讀取 'name') - React ， redux-toolkit

Question

我使用react-redux工具包从API获取数据。想要在页面渲染时显示默认的城市天气数据，但它给出了错误

TypeError:无法读取未定义(读取"name"(的属性

输出->来自index.js的空数组，而不是来自的API输出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>

家庭组件

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

App.js

<Switch>
<Route path="/about" component={About} >
<About />
</Route>
<Route path="/" component={Home}>
<Home />
</Route>
</Switch>

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) => {

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

console.log("sadsad")
}
}

Answer 1

我检查了您使用的api(https://api.weatherapi.com/v1/forecast.json?key=ebb6c0feefc646f6aa6124922211211&q=伊斯坦布尔&天=10&aqi＝否&alerts=no(查看返回的内容。

响应数据是一个包含字段的对象：位置、当前和预测。

所以一开始，我认为"；项目"；不应该是空数组，因为api不返回数组，而应该是未定义的或空对象。

然后，TypeError存在的主要原因是您无法检索数据或无法填充状态中的项。您应该检查从api返回的数据。你能成功地检索数据并用它填充状态吗？

TypeError的原因：如果您有一个空数组或空对象，并试图通过此元素访问字段(如item.location(，它不会显示错误，但如果您试图访问字段的字段(如item.location.name(，则会发生TypeError。

在组件之前检查对象也会更安全。类似：

// 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>
)}