【React】this.setStateの即時反映

困ったこと

Formの入力欄をリアルタイムでバリデーションしたいけど，this.setStateが即時に反映されない．

.js

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: 1
    };
  }
  
  foo_setTwo = () => {
    this.state({ foo: 2 });
    console.log(foo); // foo : 1
  }
}

解決法

コールバックで呼び出すか，reactのライフサイクルでcomponentDidUpdateメソッドを使うか．

.js

  foo_setTwo = () => {
    this.state({ foo: 2 }, () => {
      console.log(foo); // foo : 2
    });
  }

  componentDidUpdate(prevProps, prevState, snapshot){
    console.log(this.state.foo); // foo : 2
  }