Call the function and get method after receiving the data in componentDidMount()

Question

Expected effect: In componentDidMount () I download s and saves in the variabletimeId. If timeId is true, passthis.state.timeId to the loadTime () function to https://app/load-id/${id} and call this function. The data returned by this function is saved in the variable checkId. this.state.checkId transfers to theDetails component. Problem: how to call the function loadId (), after receiving data in componentDidMount ()?

App

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      checkId: '',
      timeId: ''
    }
  }

    componentDidMount() {
        axios({
            url: `https://app`,
            method: "GET",
            headers: {
              'Authorization': `Bearer ${token}`
            }
        })
        .then(res => {
            this.setState({
              timeId: res.data.id,
            });
        })
        .catch(error => {
            console.log(error);
        }) 

    }

  loadId =  (id) => {  //id ---> this.state.timeId
    axios({
        url: `https://app/load-id/${id}`,   
        method: "GET",
        headers: {
          'Authorization': `Bearer ${token}`           
        }
    })
    .then(response => {
        console.log(response);
        this.setState({
            checkId: response.data
        });
    })
    .catch(error => {
        console.log(error);
    })
}



  render () {

    return (
        <div>
            <Item

            />

            <Details 
                checkId = {this.state.checkId}  
            />
        </div> 
    )
  }
}

Details

class Details extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        task: ''
    };
  }


  componentDidUpdate(previousProps, previousState) {
    if (previousProps.checkId !== this.props.checkId) {

        this.setState({
            task: this.props.checkId
        })
    }

  render() {
    return (
        <div >

        </div>      
    );
  }
}

Check out https://stackoverflow.com/questions/41113798/why-and-when-do-we-need-to-bind-functions-and-eventhandlers-in-react/41113862 — Michael, Jul 22 '19 at 23:50
just call it after you get the id? `.then(res => this.loadId(res.data.id))` also @Michael haha small world that link is to my answer :) — John Ruddell, Jul 22 '19 at 23:52
@JohnRuddell It is `id`. In componentDidMount(), `https://app` --> sometimes return null, — Umbro, Jul 23 '19 at 00:03
@JohnRuddell `Null` breaks down applications because, for example, id does not exist — Umbro, Jul 23 '19 at 00:04
So either handle the invalid id in componentDidMount before passing to the next function, or let loadId handle an invalid id. Not sure what the issue is with your current question — John Ruddell, Jul 23 '19 at 00:12

score 1 · Accepted Answer · answered Jul 23 '19 at 01:01

You need to call loadId inside the then function.

    axios({
        url: `https://app`,
        method: "GET",
        headers: {
          'Authorization': `Bearer ${token}`
        }
    })
    .then(res => {
        this.setState({
          timeId: res.data.id,
        });
        this.loadId(res.data.id);
    })
    .catch(error => {
        console.log(error);
    })

score 0 · Answer 2 · answered Jul 23 '19 at 03:23

You need to bind loadId() to set state and call it when request in componentDidMount() returns response:

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      checkId: '',
      timeId: ''
    }

    this.loadId = this.loadId.bind(this); // Bind here
  }

    componentDidMount() {
        axios({
            url: `https://app`,
            method: "GET",
            headers: {
              'Authorization': `Bearer ${token}`
            }
        })
        .then(res => {
            this.setState({
              timeId: res.data.id,
            });
            this.loadId(res.data.id); // Call loadId
        })
        .catch(error => {
            console.log(error);
        }) 

    }

  //...
}

Call the function and get method after receiving the data in componentDidMount()

2 Answers2