Component rendering before props are updated - React Redux

Question

When the component is mounted a request is sent to fetch data (API). The component is rendering before this action is called which raises an undefined error.

I am fairly sure I need to implement some kind of loading state but cannot get it to work.

Component:

class Profile extends Component {


  static propTypes = {
    auth: PropTypes.object.isRequired,
    games: PropTypes.array.isRequired,
    getGames: PropTypes.func.isRequired,
    deleteGame: PropTypes.func.isRequired,
    getUser: PropTypes.func.isRequired,
  };

  componentDidMount() {
    this.props.getUser(this.props.match.params.username);
    this.props.getGames(this.props.match.params.username);
  }

  render() {
    const { user } = this.props.auth;
    const queriedUser = this.props.queriedUser;
    const loadingQueriedUser = this.props.loadingQueriedUser;

    // Edit button
    const ownerLink = (
      <div>
        <button>EDIT</button>
      </div>
    );
    const guestLink = <div></div>;

    // if (loadingQueriedUser) {
    //   return <div>Loading...</div>;
    // }

    return (
      <Fragment>
        <div>
          <div className="row mt-2">
            <div className="col-1">
              <img
                className="rounded-circle account-img"
                style={{ height: 100 + "px", width: 100 + "px" }}
                src={queriedUser.profile.profile_image}
              ></img>
            </div>

Action:

  //  GET USER
  export const getUser = (username) => (dispatch, getState) => {

// Loading query
  dispatch({ type: LOADING_QUERIED_USER });

  axios
    .get(`/api/users/${username}`, tokenConfig(getState))
    .then((res) => {
      dispatch({
        type: GET_USER,
        payload: res.data,
      });
    })
    .catch((err) => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({
        type: AUTH_ERROR,
      });
    });
  };

reactjs.org/docs/conditional-rendering.html

Drew Reese
– Drew Reese

2020-04-06 08:24:22 +00:00
Commented Apr 6, 2020 at 8:24 — Drew Reese
– Drew Reese, Commented Apr 6, 2020 at 8:24

cd3k · Accepted Answer · 2020-04-06 19:15:42Z

3

In your return expression put

return (
  queriedUser &&
  // Rest of your code...
)

Now the element will only render once your queriedUser object has loaded.

edited Apr 6, 2020 at 19:15

answered Apr 6, 2020 at 8:03

cd3k

8227 silver badges11 bronze badges

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

Comments

Vitaly Menchikovsky · Accepted Answer · 2020-04-06 08:01:30Z

1

Hi the simple example is

 if (!data)
    return <Loader  />;
  else
    return (
{{data}}
)

answered Apr 6, 2020 at 8:01

Vitaly Menchikovsky

9,20417 gold badges60 silver badges91 bronze badges

Collectives™ on Stack Overflow

Component rendering before props are updated - React Redux

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related