如何从回调方法中获取 state 的更新值？

Question

I am building a React app and I have a code following this logic:

class ComponentTest extends Component {
  state = {test: 0}

  testingHandler = () => {
     console.log(this.state.test)
  }

  updateHandler = () => {
     let test = Math.random()  
     this.setState({test})
     this.testing()
  }
        
  render () {
     return (
        <button onClick={this.updateHandler}>Update</button>
     )
  }
}

What I need to do is get the updated value of test in testingHandler() , however it doesn't happen, testingHandler just get the past value, it is like the state that is being received by testingHandler is always one step late.

For example, let's say that test = 0 , then I click on the button that calls updateHandler() and now test = 1 , after that updateHandler() calls testingHandler() , which I expect to get the new value of test which now is 1 , however I get the old value 0 . If I call updateHandler() again and update test to 2 I'll get 1 in testingHandler() , which is the past value.

How can I get this value updated from testingHandler ?

I did everything that I could imagine, but I couldn't get this done. I believe it has something to do with the render logic of React , but I don't know exactly how this is working.

PS Passing the value as an argument is not an option.

Answer 1

setState is asynchronous .

React may batch multiple setState() calls into a single update for performance.

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

You can pass a callback function as the second argument of setState that will run right after the state has updated. So in you case, you could do this:

  updateHandler = () => {
     let test = Math.random()  
     this.setState( {test}, this.testingHandler )
  }

Answer 2

copied from react documentation link: https://reactjs.org/docs/faq-state.html

Calls to setState are asynchronous - don't rely on this.state to reflect the new value immediately after calling setState. Pass an updater function instead of an object if you need to compute values based on the current state

better you can pass it as a callback function or you can also pass the value to the function.

This link is also helpful: setState doesn't update the state immediately

Answer 3

  class ComponentTest extends Component {
    state = { test: 0 };

    testingHandler = () => {
      console.log(this.state.test);
    };

    updateHandler = () => {
      let test = Math.random();
      this.setState({ test }, () => this.testingHandler()); // pass it as a callback
     
    };

    render() {
      return <button onClick={this.updateHandler}>Update</button>;
    }
  }