score:1

couple of things i can think of:

  1. checking if this.props.currentuser is defined is actually a good idea, but i would use this syntax:

    const { currentuser } = this.props;
    return currentuser && <user user={currentuser} />;
    
  2. componentdidmount is only called when the component is added to the dom. so if the userpage component is already in the dom, it wont trigger and your fetch code will never be called. in that case you could use the componentwillreceiveprops event to evaluate the new props. (see: https://facebook.github.io/react/docs/component-specs.html for more info)

  3. what does fetchuser do exactly? i assume its an async call to fetch the user data. are you using some middleware like redux-thunk? how does that code look? if you're using thunk, you can dispatch multiple actions to indicate the status of the fetch. so, something like this:

    export function fetchuser(userid) {
      return dispatch => {
        dispatch(fetchuserstart());
        someservice.fetchuser(userid)
          .then(user => dispatch(fetchuserdone(user)))
          .catch(error => {
            dispatch(fetchusererror(error));
          });
      };
    }
    

    in the above code fetchuserstart, fetchuserdone and fetchusererror are all actions (code not shown here) which are affecting the user state. fetchuserstart could set the user state to undefined, whereas fetchuserdone sets it to the user you got from the async fetch. as your userpage component is connected to this state, it will react by showing / not showing the user component.

score:3

there are ways to avoid undefined props:

1 define initial state in user reducer

const initialstate = { user:'', ... };
const user = (state = initialstate, action) => {...};
export default user;

2 handle undefined in mapstatetoprops with state.user||""

const mapstatetoprops = (state, ownprops) =>({
      currentuser: state.user||"",
      userid: ownprops.params.id
});

3 sometimes necessary to not allow mounting component before data loaded.

const loadingblock = props => {
    return (<div>{props.isloading ? 'loading...' : props.children}</div>);
};
loadingblock.defaultprops = {
    isloading: true
};

///then wrap component that will be loading

<loadingblock isloading={this.props.isloading}>
   <usercomponent user={this.props.user}>
</loadingblock>

4 if this.props.user undefined, then not show usercomponent

render(){
    let {user} = this.props
    return(
        <div>{user && <usercomponent user={user}>}</div>
    )
}

5 if this.props.user is not undefined, then show component, else show some "content"

render(){
    let {user} = this.props
    return(
        <div>{user ? <usercomponent user={user}> : "loading"}</div>
    )
}

6 define default props

class control extends react.component {...}
control.defaultprops = {value: "somevalue"};

Related Query

More Query from same tag