React-Redux用户Profile页面报错：无法解构userUpdateProfile的success属性

我开发的用户Profile页面无法正常显示，当前触发错误：Cannot destructure property 'success' of 'userUpdateProfile' as it is undefined。该任务需在24小时内完成，我已尝试自行调试但未能解决问题，恳请协助。

相关代码文件：

userActions.js #

export const getUserDetails = (id) => async (dispatch, getState) => {
  try {
    dispatch({
      type: USER_DETAILPROFILE_REQUESTED,
    })

    const {
      userLogin: { userInfo },
    } = getState()

    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${userInfo.token}`,
      },
    }
    const { data } = await axios.get(`/api/users/${id}`, config)

    dispatch({
      type: USER_DETAILPROFILE_SUCCESSFUL,
      payload: data,
    })
  } catch (error) {
    dispatch({
      type: USER_DETAILPROFILE_FAILED,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

export const updateUserProfile = (user) => async (dispatch, getState) => {
  try {
    dispatch({
      type: USER_UPDATEDPROFILE_REQUESTED,
    })

    const {
      userLogin: { userInfo },
    } = getState()

    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${userInfo.token}`,
      },
    }
    const { data } = await axios.put(`/api/users/profile`, user, config)

    dispatch({
      type: USER_UPDATEDPROFILE_SUCCESSFUL,
      payload: data,
    })

    dispatch({
      type: USER_LOGIN_SUCCESSFUL,
      payload: data,
    })

    localStorage.setItem('userInfo', JSON.stringify(data))
  } catch (error) {
    dispatch({
      type: USER_UPDATEDPROFILE_FAILED,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    })
  }
}

Profile Screen组件代码 #

import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Row, Col, Form } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import Message from '../components/Message'
import Loader from '../components/Loader'
import { getUserDetails, updateUserProfile } from '../actions/userActions'
import { USER_UPDATEDPROFILE_RESET } from '../constants/userConstants'

const ProfileScreen = ({}) => {
  const [userName, setName] = useState('')
  const [userEmail, setEmail] = useState('')
  const [userPassword, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [message, setMessage] = useState(null)

  const dispatch = useDispatch()

  const userDetails = useSelector((state) => state.userDetails)
  const { loading, error, user } = userDetails

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo } = userLogin

  const userUpdateProfile = useSelector((state) => state.userUpdateProfile)
  const { success } = userUpdateProfile

  const navigate = useNavigate()

  useEffect(() => {
    if (!userInfo) {
      navigate('/login')
    } else {
      if (!userInfo.name) {
        dispatch(getUserDetails('profile'))
        dispatch({ type: USER_UPDATEDPROFILE_RESET })
      } else {
        setName(userInfo.name || success)
        setEmail(userInfo.email)
      }
    }
  }, [dispatch, navigate, userInfo, user, success])
}

核心问题 #

错误根源是Redux状态树中userUpdateProfile节点未被初始化，导致组件通过useSelector获取到的值为undefined，解构success属性时触发报错。

修复步骤 #

1. 初始化Redux Reducer中的userUpdateProfile状态

找到你的用户reducer文件（如userReducer.js），确保为userUpdateProfile设置初始状态：

// 初始状态定义
const initialState = {
  userLogin: {},
  userDetails: {},
  // 必须初始化userUpdateProfile
  userUpdateProfile: {
    success: false,
    loading: false,
    error: null
  }
}

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case USER_UPDATEDPROFILE_REQUESTED:
      return {
        ...state,
        userUpdateProfile: {
          ...state.userUpdateProfile,
          loading: true,
          error: null
        }
      }
    case USER_UPDATEDPROFILE_SUCCESSFUL:
      return {
        ...state,
        userUpdateProfile: {
          ...state.userUpdateProfile,
          loading: false,
          success: true
        }
      }
    case USER_UPDATEDPROFILE_FAILED:
      return {
        ...state,
        userUpdateProfile: {
          ...state.userUpdateProfile,
          loading: false,
          error: action.payload
        }
      }
    case USER_UPDATEDPROFILE_RESET:
      return {
        ...state,
        userUpdateProfile: {
          success: false,
          loading: false,
          error: null
        }
      }
    // 其他已有的case逻辑...
    default:
      return state
  }
}

2. 组件中添加兜底处理（可选）

在ProfileScreen组件中，解构时添加默认值，避免状态未初始化的情况：

// 原代码
const userUpdateProfile = useSelector((state) => state.userUpdateProfile)
const { success } = userUpdateProfile

// 修改为
const userUpdateProfile = useSelector((state) => state.userUpdateProfile || {})
const { success = false } = userUpdateProfile

3. 验证USER_UPDATEDPROFILE_RESET的处理

确保reducer中处理USER_UPDATEDPROFILE_RESET时，是将userUpdateProfile重置为包含success: false的对象，而非设置为undefined。

完成以上步骤后，userUpdateProfile状态会始终存在，解构success时就不会再出现undefined的报错。

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