今回は、後輩君が開発している React プロジェクトで遭遇した現象についてご紹介。
エラーメッセージが画面に反映されないとのことでお手伝いに行ったのですが、これの原因を突き止めるのがなかなか大変でした…！
で、判明した原因は shouldComponentUpdate() 内の処理の不具合でした。
公式サイトの shouldComponentUpdate() の説明はこちら。
React.Component – React
https://ja.reactjs.org/docs/react-component.html#shouldcomponentupdate
こちらを指定すると、shouldComponentUpdate() で true が返ったときのみ render() を呼び出すように変更できます。
サンプルコードはこちら。
shouldComponentUpdate(nextProps, nextState) {
// 任意の処理を追加
// 必ず return で true/false を返す
return this.state.name !== nextProps.name || this.state.email !== nextProps.email;
}
こちらを使って、指定した値が変更された時のみ render() を呼び出して画面を再描画を実行するようにしていたのですが、この中にエラーメッセージの変数が定義されていなかったことが原因でした。
そのため、こちらの記述をごっそり削除したところ、問題なくエラーメッセージが反映されるようになりました！
もちろん、shouldComponentUpdate() 内に、エラーメッセージの変数を定義するように修正してもOKです。
上手く使えば便利な機能なのですが…個人的には今回のような不具合の原因にもなるので、なるべく使わない方が良いかなと思っています。
特に、React を使い始めたばかりくらいの人は要注意です。
以上、React で setState() を実行しても render() が呼び出されないときの対処方法についてでした。
もちろん、他のことが原因のこともあると思いますが、とりあえず shouldComponentUpdate() がないかと、ある場合は関数内の記述を確認することをおすすめします。
ご参考になれば幸いです。
