ReactJs : Setstate is not updating the state

Question

Below is the initial state which is assigned

state = {
            movie : null,
            actors : null,
            directors : [],
            loading : false
        }

Below is the set state which i set and at the end to set state as put in comment when it is set and not set. I'm not able to access the this.state outside.

this.setState({movie:result},() => {
                      //then fetch the actors
                      const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`;
                      fetch(endpoint)
                      .then(result => result.json())
                      .then(result=>{
                        const directors =result.crew.filter((member)=> member.job==='Director' ); 
                        this.setState({
                            actors : result.cast,
                            directors,
                            loading : false
                        })
                       console.log(this.state); //here value is coming
                      })         
                  })console.log(this.state); //here value is not coming

How to get this.state value with updated info?

render() { 
    //removed code below mull div
    return  ( 
    <div className="rmdb-movie">
        {this.state.movie ? 
        <div>
          <Navigation movie={this.props.location.movieName}/>
        </div>  
         : null
        }

    </div> 
    )
}

AJ_ · Accepted Answer · 2020-04-25 19:40:04Z

2

What you're experiencing is the result of using asynchronous functions. The callback you pass to this.setState() is called whenever the state is set, and there might be a delay between when you call this.setState() and when the state is actually updated. This means that the callback may or may not be executed when you reach the second console.log().

This explains why you are seeing these results. The first console.log() is actually called after the second console.log.

answered Apr 25, 2020 at 19:40

AJ_

1,4851 gold badge10 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vidyashree kn Over a year ago

I undestood your comments, but wat to do to get update this.state value

AJ_ Over a year ago

It depends. Why do you want to access the updated values?

vidyashree kn Over a year ago

this is because state is having movie,actors, directors as null. So after calling API i need updated values

AJ_ Over a year ago

Ok then you want to access this.state inside of the callback function (i.e. where you are using your first console.log())

vidyashree kn Over a year ago

actually i want to use in render function, but console.log(this.state) params is null

|

Matthieu Bouxin · Accepted Answer · 2020-04-25 19:39:09Z

1

This is react lifecycle ! The setState function is not executed instantaneously. The inner console.log prints the good values because in the callback of setState you are sur it is executed. The outer console.log is executed before setState has actually modified the state and so you don't see the updated info.

answered Apr 25, 2020 at 19:39

Matthieu Bouxin

1271 silver badge5 bronze badges

1 Comment

vidyashree kn Over a year ago

then how to fix this, i mean how can i get updated this.state with values

Armaan Bindra · Accepted Answer · 2020-04-25 19:46:02Z

What you are seeing is actually what is expected, this is because Javascript in general and your specific fetch API call is asynchronous. Your first console.log() is inside the response from the fetch request, so it is only executed when the server returns the response(which could be a few seconds or more), then the state is set, then you print using console.log. The second console.log is outside, and will actually print instantly ,even before the async API call is made, before the state has actually been updated. Therefore, I would recommend that whatever action you want to do after the state is set, should be done where the first console.log is. Or preferably like this in a callback that you can pass to this.setState to ensure the state has been updated.

this.setState({movie:result},() => {
                      //then fetch the actors
                      const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`;
                      fetch(endpoint)
                      .then(result => result.json())
                      .then(result=>{
                        const directors =result.crew.filter((member)=> member.job==='Director' ); 
                        this.setState({
                            actors : result.cast,
                            directors,
                            loading : false
                        },()=>{
                        // API Call has returned and state has been updated
                        // Now access this.state 
                        });
                      })         
                  })

gzaripov · Accepted Answer · 2020-04-25 19:43:27Z

0

setState operation is asynchronous, you can read more about it in react documentation.

What problem are you trying to solve? Probably you need to use hook componentDidUpdate or just use this value in next render call.

answered Apr 25, 2020 at 19:43

gzaripov

6956 silver badges8 bronze badges

3 Comments

vidyashree kn Over a year ago

I am trying to achieve to get updated this.state with updated params

gzaripov Over a year ago

What business problem are you solving? Do you need to render view with updated data or show popup?

gzaripov Over a year ago

React will call render function after setState, so just check for data in render function like if (this.state.data) return <SomeComponent data={this.state.data}>

tksilicon · Accepted Answer · 2020-04-25 20:13:45Z

I think you should rethink the code because there is no way result will get to movies the way you put it. Except somehow you update another state inside the API function to fetch movies. So somehow you can call fetch which you must have binded to your class this.fetch = this.fetch.bind(this) from some onclick or onchange or something.

fetch =() =>{

        const endpoint= `${API_URL}movie/${this.props.match.params.movieId}/credits?api_key=${API_KEY}`;
        fetch(endpoint)
        .then(result => result.json())
        .then(result=>{
          const directors =result.crew.filter((member)=> member.job==='Director' ); 
          this.setState({
              actors : result.cast,
              directors,
              loading : false,
              movies:result
          })


        }) 

  }

Collectives™ on Stack Overflow

ReactJs : Setstate is not updating the state

5 Answers 5

7 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related