困ったこと
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
}