React+Redux-Toolkit读取userPosition.main.temp时出现undefined报错

问题分析 #

你碰到的Cannot read properties of undefined (reading 'temp')报错，虽然已经用了可选链userPosition?.main.temp且userPosition.name能正常显示，但仍触发错误，大概率是以下原因：

• Redux切片（slice）中userPosition的初始状态或异步请求后的状态结构异常，导致main字段不存在
• 异步请求getUserPosition返回的API数据结构不符合预期，缺失main层级
• 组件渲染时的状态判断逻辑有漏洞，虽然判断了userPosition存在，但未确保main字段已加载完成

解决方案 #

1. 完善Redux切片的状态管理

先检查userPositionSlice的初始状态和异步处理逻辑，确保状态结构清晰可控：

// userPositionSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const getUserPosition = createAsyncThunk(
  'userPosition/getUserPosition',
  async ({x, y}) => {
    // 替换为你的实际API请求，确保返回数据包含main.temp
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${x}&lon=${y}&appid=你的API密钥&units=metric`);
    return response.data;
  }
);

const initialState = {
  userPosition: null, // 初始设为null，便于组件判断加载状态
  status: 'idle', // 新增状态字段：idle/pending/succeeded/failed
  error: null
};

const userPositionSlice = createSlice({
  name: 'userPosition',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(getUserPosition.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(getUserPosition.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.userPosition = action.payload;
      })
      .addCase(getUserPosition.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default userPositionSlice.reducer;

2. 强化组件中的状态判断与可选链

在组件中，结合Redux的状态字段判断请求是否完成，同时对main和temp都添加可选链，避免层级访问报错：

// 先在组件中获取状态字段
const userPositionStatus = useSelector((state) => state.userPosition.status);
const userPositionError = useSelector((state) => state.userPosition.error);

// 修改渲染逻辑
<div className={styles.top_section}>
  {/* 仅在请求成功后渲染数据 */}
  {userPosition && userPositionStatus === 'succeeded' && (
    <>
      <div>
        <p>{userPosition.name}</p>
        <p>{userPosition.visibility}</p>
      </div>
      <div>
        {/* 对main和temp都添加可选链，同时用空值合并运算符显示默认值 */}
        <span>{userPosition?.main?.temp ?? '--'}</span>
        <span>°C</span>
      </div>
    </>
  )}
  {/* 添加加载状态提示 */}
  {userPositionStatus === 'pending' && <p>加载中...</p>}
  {/* 添加错误提示 */}
  {userPositionStatus === 'failed' && <p>加载失败：{userPositionError}</p>}
</div>

3. 检查API返回数据结构

通过console.log(userPosition)查看实际返回的数据，确认是否存在main.temp字段。如果API返回结构异常，可能是请求参数错误（比如未指定单位、API密钥无效），需要修正请求逻辑。

4. 优化useEffect的dispatch时机

当前useEffect依赖x、y状态触发dispatch，可直接在地理位置获取成功后发起请求，减少不必要的状态更新：

useEffect(() => {
  const successHandler = async (position) => {
    const { latitude, longitude } = position.coords;
    // 直接在回调中dispatch，无需依赖x、y状态
    await dispatch(getUserPosition({ x: latitude, y: longitude }));
  };
  navigator.geolocation.getCurrentPosition(successHandler);
}, [dispatch]);

内容的提问来源于stack exchange，提问作者Alkis Green