How to generate dynamic url with state in componentDidMount?

Question

I want to dynamic the URL with {this.state.whatever} in componentDidMount but failed. Because the state value is undefined(I run the console.log and the error also shows it)

I thought componentDidMount runs after the state reset, so I can use the updated state in the URL but doesn't work, I wonder why

state={ breed: "" }
async componentDidMount(){
   try {
       const res = await 
       fetch(`https://dog.ceo/api/breed/${this.state.breed}/images`);
       const data = await res.json();
       const imageUrl = data.message;
       this.setState({
         puppyImage: imageUrl
       })

   } catch (error) {
     console.log(error);
   }
 }

 onChangeHandler = event => {
   this.setState({breed: event.target.value})
 };

this URL doesn't work because of {this.state.breed} is undefined, which means it hasn't been updated. the error shows: GET https://dog.ceo/api/breed//images 404

```componentDidMount``` is run when you component mounted. It is not run when ```state``` or ```props``` change. Please read ```React``` document carefully https://reactjs.org/docs/state-and-lifecycle.html — Tien Duong, Aug 04 '19 at 02:55
Hi Bowei, see my solution below and let me know if that helps. — Chris Ngo, Aug 04 '19 at 03:42

Chris Ngo · Accepted Answer · 2019-08-04T03:05:25.500

componentDidMount() will only run a single time after the component renders, and never again.

You should use componentDidUpdate() instead which is triggered anytime the component gets an updated state or props. Within it, you can configure logic to determine whether you should do a new fetch.

componentDidUpdate(prevProps, prevState){
   if(prevState.breed !== this.state.breed){
     try {
       const res = await 
       fetch(`https://dog.ceo/api/breed/${this.state.breed}/images`);
       const data = await res.json();
       const imageUrl = data.message;
       this.setState({
         puppyImage: imageUrl
       })

     } catch (error) {
       console.log(error);
     }
   }
 }

Under the assumption that you do something that changes this.state.breed. The componentDidUpdate() logic defined above would trigger then check if their is a difference between the previous breed state and the updated breed state. If there is, then a new fetch-call is made with that breed and you will get a new puppyImage :).

And I like your explanation, pretty clear and easy to understand. — Alex Yao, Aug 04 '19 at 04:06
@BoweiYao that's awesome! i'm glad this solution worked for you. Please consider upvoting and marking it as the solution (check button). Let me know if you have any other questions :) — Chris Ngo, Aug 04 '19 at 07:07

How to generate dynamic url with state in componentDidMount?

1 Answers1