getting error while destructuring the data from react redux. why it is giving error and how to solve this?

user_12058221 0
Viewed 257

Here is the profile component where i am trying to fetch the user data and getting error in the highlighted part of code. why is userData is undefined ??

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

Here is the Reducer file for userProfile -

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

I am getting this error

TypeError: Cannot destructure property 'posts' of 'userData' as it is undefined. Profile
react-router react-redux reactjs node.js javascript
2 Answers

It's impossible for us to know why it's undefined because you don't show where you add the userProfile state on your redux store.

I think userData "loading" during your render, so for the first render userData is undefined.

To avoid this bug, please try to add a if statement :

    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>
user_124727360

The problem is your case GET_USER_PROFILE_FAIL which returns an object with properties loading and error and does not copy any other properties from ...state. This causes the userData property to become undefined.

If this is the desired behavior then you need to check for undefined in your component and show some sort of error message.

user_104315740
Related