React - Redux: Store Data is not rendering?

Question

I am trying to render a simple profile from my redux store. Actually, the data is successfully provided and mapped to my props. I can log the profile information in the console. But when I render the profile data, it tells me that the data is not defined.

When I console log the profile , it says undefined first and then displays the data (see down). I wonder if react tries to render in the moment the data is undefined.

Console Log

undefined                        profile.js:28 

Object                           profile.js:28 
bio: "Test"
id: 2
image: "http://localhost:8000/media/default.jpg"

Component

export class ProfileDetail extends Component {

  constructor(props) {
    super(props);  
}

 componentDidMount() {                                                         
    this.props.getProfile(this.props.match.params.id);
  }


    static propTypes = {
      profile: PropTypes.array.isRequired,
      getProfile: PropTypes.func.isRequired,
   };

render() {  
    const profile = this.props.SingleProfile;
    console.log (profile)

    return (

  <Fragment>
        
      <div className="card card-body mt-4 mb-4">
      <h2>{profile.bio}</h2> // if i use here just a string its successfully rendering
      </div>
      </Fragment>
   
    );
  }
}

function mapStateToProps(state, ownProps) {
  const { profile} = state.profile
  const id = parseInt(ownProps.match.params.id, 10)      
  const SingleProfile = profile.find(function(e) {
    return e.id == id;
  });

  return { profile, SingleProfile}
}


export default connect(
  mapStateToProps,
  { getProfile}
)(ProfileDetail);

Im a little bit lost and happy for any clarification.

A good way to start is to check redux dev tools, see what actions are dispatched and what changes they cause on the state, then identify a problem and if you can't solve it post relevant code like dispatched this, reduced like so, connected like this but getting that. — HMR
– HMR, Commented Jul 6, 2020 at 18:34

Apostolos · Accepted Answer · 2020-07-06 18:35:57Z

1

You need to check if profile is loaded. It is normal that request takes some time - it is not instant - to load any data. Check that profile exists and display its property

<h2>{profile && profile.bio}</h2>

As an alternative, you could display a message:

<h2>{profile ? profile.bio : "Profile not loaded yet"}</h2>

answered Jul 6, 2020 at 18:35

Apostolos

10.5k5 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dan_boy Over a year ago

Thanks for the answer! It works. I guess the answer you provided is a quick fix and there should be more sophisticated solutions to check if the data ist actually loaded?

Apostolos Over a year ago

@dan_boy the more sophisticated way is to handle http requests at your middleware and then act accordingly. but even with this, this code snippet is "mandatory" let's say. You always need to check somehow that a variable is loaded when dealing with http requests, before displaying a property of it.

Apostolos Over a year ago

for example you could have a "messages" panel and load all http error messages there. then user would be presented with these errors in that panel. every time an http error occurs, you dispatch an equivalent action e.g. HTTP_FAILURE and then you handle it accordingly at your reducer(s).

Collectives™ on Stack Overflow

React - Redux: Store Data is not rendering?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related