从 react redux 解构数据时出错。为什么它给出错误以及如何解决这个问题？

Question

这是我试图获取用户数据并在代码的突出显示部分中出错的配置文件组件。为什么 userData 是未定义的？？

import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import { getUserProfile } from '../../actions/userActions';
import Styles from './Profile.module.scss';

const Profile = (props) => {
    const userId = props.match.params.id;

    const dispatch = useDispatch();

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

    **const userProfile = useSelector(state => state.userProfile);
    const {loading, error, userData} = userProfile;

    const {posts, data} = userData;**

    useEffect(() => {
        if(!userInfo){
            props.history.push('/login');
        }else{
            dispatch(getUserProfile(userId));
        }
    }, [dispatch,userId])

    return (
        <section>
            <div className={Styles.Container}>
                <h1>{data.userName}</h1>
                <h1>{data.followers.length} followers</h1>
                <h1>{data.following.length} following</h1>
                <h1>{posts.length} posts</h1>
            </div>
        </section>
    )
}

export default Profile

这是 userProfile 的 Reducer 文件 -

export const userProfileReducer = (state={ userData: {}}, action) => {
  switch(action.type){
    case GET_USER_PROFILE_REQUEST:
      return { loading: true, ...state, }
    
    case GET_USER_PROFILE_SUCCESS:
      return { ...state, loading: false, userData: action.payload}
    
    case GET_USER_PROFILE_FAIL:
      return { loading: false, error: action.payload}
    default: return state;
  }
}

我收到了这个错误

TypeError: Cannot destructure property 'posts' of 'userData' as it is undefined. Profile

Answer 1

我们不可能知道为什么它是未定义的，因为您没有显示在您的 redux 存储中添加 userProfile 状态的位置。

我认为userData 在渲染期间“正在加载”，所以对于第一次渲染，userData 是未定义的。

为避免此错误，请尝试添加 if 语句：

    useEffect(() => {
        if(!userInfo){
            props.history.push('/login');
        }else{
            dispatch(getUserProfile(userId));
        }
    }, [dispatch,userId])

    if (userData) {
      const {posts, data} = userData;**
      return (
        <section>
            <div className={Styles.Container}>
                <h1>{data.userName}</h1>
                <h1>{data.followers.length} followers</h1>
                <h1>{data.following.length} following</h1>
                <h1>{posts.length} posts</h1>
            </div>
        </section>
      )
    }

    return <div>Loading...</div>

Answer 2

问题是您的case GET_USER_PROFILE_FAIL 返回一个具有属性loading 和error 的对象，并且不会从...state 复制任何其他属性。这会导致userData 属性变为undefined。

如果这是所需的行为，那么您需要检查组件中的 undefined 并显示某种错误消息。