-2
componentWillMount() {
        let dID=this.props.match.params.datumID;
        this.setState({datumID: dID});
        console.log(dID);
        console.log(this.state.datumID);
    }

I'm just trying use setState() method.

But the problem is it is not working.

Here is what I get as output:

First console.log() : 66
Second console.log(): null
Maifee Ul Asad
  • 3,992
  • 6
  • 38
  • 86

5 Answers5

5

this.setState accepts a second argument as callback which is fired after the state is successfully changed.

componentWillMount() {
        let dID=this.props.match.params.datumID;
         console.log(dID);
        this.setState({datumID: dID},()=>console.log(this.state.datumID)); 
    }

side note : Move your code to componentDidMount.

componentWillMount() is invoked immediately before mounting occurs. It is called before render(), therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method.

blueseal
  • 2,726
  • 6
  • 26
  • 41
5

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

If you need to set the state based on the previous state, read about the updater argument below.

    this.setState((prevState, props) => {
       return {datumID: props.match.params.datumID};
    });
Oleg
  • 3,580
  • 1
  • 7
  • 12
4

Because SetState() is an asynchronous function, use below code 

componentWillMount() {
let dID=this.props.match.params.datumID;
this.setState({datumID: dID},
function(){
console.log(this.state.datumID)});
console.log(dID);  
}

and if possible try to avoid compenentWillMount since it would be deprecated soon

Mojo
  • 498
  • 1
  • 8
  • 16
3

setState() being an asynchronous function it is in progress of updating the state and javascript being single-threaded language it will execute the next line of code. So if you want to see the state value set you have to do something like this.

componentDidMount=()=> {
        let dID=this.props.match.params.datumID;
        this.setState({
               datumID: dID
        },()=>{  
          console.log(dID);
          console.log(this.state.datumID);
       });  
    }

Also I would recommend you to use componentDidMount as willMount won't work in the future as it is deprecated

Saqib Naseeb
  • 731
  • 1
  • 9
  • 21
3

this.setState is an asynchronous function that takes time and passes the newly assigned state value over all of the React's life-cycle functions in order to update a state and trigger the re rendering of a component. Your first console logs out the value that is assigned to set state and the next console logs out the value that is currently residing in the state this.state.datumID. if you need to perform operations after setting state you can pass a callback that is triggered after a state is successfully updated. 

this.setState({datumID: dID}, () => console.log(this.state.datumID) ); // this will log the updated value

Another thing I want to point out is componentWillMount will wont work in the future release. If you want to do something after DOM is rendered, use componentDidMount or you can perform pre-render task in the constructor of your Class Component.

Ahsan-J
  • 186
  • 2
  • 7