title: How to get current user to display profile page in React app?
body: <p>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.</p>
  
  <p>I've tried tyo fetch the data with <code>this.props.getUser(this.props.auth._id)</code> in the <code>Constructor</code> or in <code>ComponentDidMount</code>, but it did not load.
  The data does comes in through <code>componentWillReceiveProps</code>, but it does not load on the first page load. Although, if I refresh the page, the data comes in.</p>
  
  <p>This is part of my <code>profile.js</code>:</p>
  
  <pre><code>class Profile extends Component {
  
    state = {
      _id: '',
      name: '',
      email: '',
      username: '',
      errors: {}
    };
  
    componentDidMount() {
      this.loadCurrentUser();
    }
  
    loadCurrentUser = () =&gt; {
      this.setState(this.props.getUser(this.props.auth._id));
    };
  
    // https://hackernoon.com/replacing-componentwillreceiveprops-with-getderivedstatefromprops-c3956f7ce607
    UNSAFE_componentWillReceiveProps(nextProps, nextState) {
      console.log("received")
      const { name, email, username } = nextProps.auth;
      this.setState({ name, email, username });
    }
  
  
  // ...
  // Some other code
  // ...
  
  const mapStateToProps = (state) =&gt; ({
    auth: state.auth
  });
  
  export default connect(mapStateToProps, { getUser, logOut })(Profile);
  </code></pre>
  
  <p>My question is: How to load the page with the data I get from the API presented in the form fields?</p>
  
  <p>Thank you</p>
  
  <hr>
  
  <p><strong>EDITED</strong></p>
  
  <p>I have edited my componentDidMount to use promises, but I still can not get it right. Now, My store gets the states right, but my component still does not get updated.</p>
  
  <pre><code>  componentDidMount() {
      this.props.getUser(this.props.auth.user)
        .then(user =&gt; this.setState({ name: user.name, email: user.email, username: user.username }))
    }
  </code></pre>
  
  <p>If I add a simple console.log, I still can not get the return from my query (getUser). This console.log is undefined.</p>
  
  <pre><code>  componentDidMount() {
      this.props.getUser(this.props.auth.user)
        .then(user =&gt; console.log(user));
    }
  </code></pre>
  
  <hr>
  
  <p>This is my getUser (src/actions/userActions.js):</p>
  
  <pre><code>export const getUser = _id =&gt; async dispatch =&gt; {
    const res = await axios.get(`${process.env.REACT_APP_USERS_API}/api/v1/users/${_id}`);
    dispatch({
      type: GET_USER,
      payload: res.data.data
    });
  };
  </code></pre>