TypeError: Cannot read properties of undefined (reading 'name') - React , redux-toolkit

Question

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

TypeError: Cannot read properties of undefined (reading 'name')

Output - > Empty Array from index.js than API output from 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=Istanbul&days=10&aqi=no&alerts=no) 看看它是什么 returns。

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

所以起初，我认为“item”的初始状态不应该是一个空数组，因为 api 不是 returns 一个数组，它应该是未定义的或空对象。

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

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

TypeError: Cannot read properties of undefined (reading 'name') - React , redux-toolkit

TypeError: Cannot read properties of undefined (reading 'name') - React , redux-toolkit

javascript

reactjs

react-redux