TypeError: Cannot read property XXX of undefined

Reactの勉強中にでてきたこのエラーメッセージとの奮闘記。勉強かねての投稿なので、理解が深まり次第更新予定です。

メッセージ自体の意味するところは、XXXというメソッド(?)を持つコンポーネント(?)がUndefinedですよ、てこと。

えぇ、そもそもこのメッセージ自体の理解がまだ浅いです。

とにかくUndefinedなのが問題なはずで、なんでそうなってしまっているのか？

調べていると、こんな記事に遭遇。

https://daveceddia.com/watch-out-for-undefined-state/

ざっくり訳してまとめると、

非同期でデータを取ってきて表示するような処理をしている場合、renderに渡るはずのstateがNullのままだとそのPropertyはUndefinedになってしまう、だからStateの初期化をConstructorでしてあげないといけませんよ。その時にPropTypesや場合によってはdefaultPropsも指定すべきで、その際にrender内で書けるDestructuring syntaxは便利ですよ。

...って感じなはずだけど、浅い理解なので訳も不安。

ここで出てきたPropTypes（とdefaultProps）に関して一つ注意しておきたいのが、少し古めの記事とかだと、PropTypesをreactからimportしてるけど、v15.5以降はprop-typesからだという点。

https://ja.reactjs.org/docs/typechecking-with-proptypes.html

各コンポーネントのプロパティに対して、下記のようにどんどん型を割り当てるみたいです。

MyComponent.propTypes = {
// You can declare that a prop is a specific JS type. 
//By default, these are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object
// and more...
 }