I want to create a profile page in my React app. The user data is in the state but I want to load the data from the API as I load the page.

I've tried tyo fetch the data with this.props.getUser(this.props.auth._id) in the Constructor or in ComponentDidMount, but it did not load. The data does es in through ponentWillReceiveProps, but it does not load on the first page load. Although, if I refresh the page, the data es in.

This is part of my profile.js:

class Profile extends Component {

  state = {
    _id: '',
    name: '',
    email: '',
    username: '',
    errors: {}
  };

  ponentDidMount() {
    this.loadCurrentUser();
  }

  loadCurrentUser = () => {
    this.setState(this.props.getUser(this.props.auth._id));
  };

  // 
  UNSAFE_ponentWillReceiveProps(nextProps, nextState) {
    console.log("received")
    const { name, email, username } = nextProps.auth;
    this.setState({ name, email, username });
  }


// ...
// Some other code
// ...

const mapStateToProps = (state) => ({
  auth: state.auth
});

export default connect(mapStateToProps, { getUser, logOut })(Profile);

My question is: How to load the page with the data I get from the API presented in the form fields?

Thank you

---

EDITED

I have edited my ponentDidMount to use promises, but I still can not get it right. Now, My store gets the states right, but my ponent still does not get updated.

  ponentDidMount() {
    this.props.getUser(this.props.auth.user)
      .then(user => this.setState({ name: user.name, email: user.email, username: user.username }))
  }

If I add a simple console.log, I still can not get the return from my query (getUser). This console.log is undefined.

  ponentDidMount() {
    this.props.getUser(this.props.auth.user)
      .then(user => console.log(user));
  }

---

This is my getUser (src/actions/userActions.js):

export const getUser = _id => async dispatch => {
  const res = await axios.get(`${process.env.REACT_APP_USERS_API}/api/v1/users/${_id}`);
  dispatch({
    type: GET_USER,
    payload: res.data.data
  });
};

I want to create a profile page in my React app. The user data is in the state but I want to load the data from the API as I load the page.

I've tried tyo fetch the data with this.props.getUser(this.props.auth._id) in the Constructor or in ComponentDidMount, but it did not load. The data does es in through ponentWillReceiveProps, but it does not load on the first page load. Although, if I refresh the page, the data es in.

This is part of my profile.js:

class Profile extends Component {

  state = {
    _id: '',
    name: '',
    email: '',
    username: '',
    errors: {}
  };

  ponentDidMount() {
    this.loadCurrentUser();
  }

  loadCurrentUser = () => {
    this.setState(this.props.getUser(this.props.auth._id));
  };

  // https://hackernoon./replacing-ponentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607
  UNSAFE_ponentWillReceiveProps(nextProps, nextState) {
    console.log("received")
    const { name, email, username } = nextProps.auth;
    this.setState({ name, email, username });
  }


// ...
// Some other code
// ...

const mapStateToProps = (state) => ({
  auth: state.auth
});

export default connect(mapStateToProps, { getUser, logOut })(Profile);

My question is: How to load the page with the data I get from the API presented in the form fields?

Thank you

---

EDITED

I have edited my ponentDidMount to use promises, but I still can not get it right. Now, My store gets the states right, but my ponent still does not get updated.

  ponentDidMount() {
    this.props.getUser(this.props.auth.user)
      .then(user => this.setState({ name: user.name, email: user.email, username: user.username }))
  }

If I add a simple console.log, I still can not get the return from my query (getUser). This console.log is undefined.

  ponentDidMount() {
    this.props.getUser(this.props.auth.user)
      .then(user => console.log(user));
  }

---

This is my getUser (src/actions/userActions.js):

export const getUser = _id => async dispatch => {
  const res = await axios.get(`${process.env.REACT_APP_USERS_API}/api/v1/users/${_id}`);
  dispatch({
    type: GET_USER,
    payload: res.data.data
  });
};

• javascript
• reactjs

Share Improve this question Follow edited Feb 12, 2020 at 2:19 brauliopf asked Feb 11, 2020 at 23:20 brauliopfbrauliopf 7111 gold badge22 silver badges1111 bronze badges 1

• "ponent still does not get updated", can you show a few lines of how you bind your data in the ponent to the state? – Andus Commented Feb 12, 2020 at 2:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

The getUser action does not have return value. Instead, it updates the user data inside the redux store. So you shouldn't reply on the return value and set state from it.

Instead, dispatch the getUser action on page load so that the user data is updated and always access the data from the store (through this.props.auth). If there is an updated version of the user data, React handles the page re-render automatically:

ponentDidMount() {
    this.props.getUser(this.props.auth.user);
}

If for some reason, you need the user data to be saved in state (for example, you have a form on page where user can update username/password), then use getDerivedStateFromProps method:

static getDerivedStateFromProps(props, state) {
    // return an object to update the state.
    return props.auth;
}