In ponentDidMount I'm trying to get data called topic from /api/topics/${params.TopicId route then from response I want to send only topic.user_id to another route and get whole user as response. But this isn't working because they are sending request in the same time so the state of topic.user_id is empty. Is it a way that I can take piece of response and give it to the another request ? I'm doing it in ponentDidMount so it will be done before ponent renders.

ponentDidMount() {
    const {
      match: { params }
    } = this.props;

    axios
      .get(`/api/topics/${params.TopicId}`)
      .then(response => {
        this.setState({ topic: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });

    axios
      .get(`/api/users/${this.state.topic.user_id}`)
      .then(response => {
        this.setState({ user: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

In ponentDidMount I'm trying to get data called topic from /api/topics/${params.TopicId route then from response I want to send only topic.user_id to another route and get whole user as response. But this isn't working because they are sending request in the same time so the state of topic.user_id is empty. Is it a way that I can take piece of response and give it to the another request ? I'm doing it in ponentDidMount so it will be done before ponent renders.

ponentDidMount() {
    const {
      match: { params }
    } = this.props;

    axios
      .get(`/api/topics/${params.TopicId}`)
      .then(response => {
        this.setState({ topic: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });

    axios
      .get(`/api/users/${this.state.topic.user_id}`)
      .then(response => {
        this.setState({ user: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

• javascript
• reactjs
• axios

3 Answers 3

ponentDidMount() {
  const {
    match: { params }
  } = this.props;

  fetch(`/api/topics/${params.TopicId}`,(response)=>{
    this.setState({ topic: response.data } , 
      {
        fetch(`/api/users/${this.state.topic.user_id}` ,(response)=>{
          this.setState({ user: response.data });
        } )
      });

}

const fetch = (uri,callBack) =>{
  axios
  .get(uri)
  .then(response => {
    callBack(response)
  })
  .catch(function(error) {
    console.log(error);
  });
}

it will be better to use the set state callback parameter

setState(updater[, callback])

https://reactjs/docs/react-ponent.html#setstate

because you need the state been updated before the next fetch

You can chain your Promises together like this:

ponentDidMount() {
  const {
    match: { params }
  } = this.props;

  axios
    .get(`/api/topics/${params.TopicId}`)
    .then(response => {
      this.setState({ topic: response.data });
      return axios.get(`/api/users/${response.data.user_id}`);
    })
    .then(response => {
      this.setState({ user: response.data });
    })
    .catch(function(error) {
      console.log(error);
    });
}

You could use a callback.

const func = (id, cb) => axios
  .get(`/api/topics/${id}`)
  .then(response => {
    this.setState({ topic: response.data });
    cb(response.data.user_id);
  })
  .catch(function(error) {
    console.log(error);
  });

This way, you can call...

func(params.TopicId, user_id => axios
  .get(`/api/users/${user_id}`)
  .then(response => {
    this.setState({ user: response.data });
  })
  .catch(function(error) {
    console.log(error);
  })
)