Reactでstateの変更が反映されない

起こったこと

Reactで親コンポーネントでー行った、stateの変更が子コンポーネントで反映されません。
具体的には親コンポーネントは子コンポーネント１と子コンポーネント２を持っています。
子コンポーネント１で親のstateを変更し、その結果を子コンポーネント２で表示させています。

解決策

公式ドキュメントにちゃんと書いてありました。

補足

props を state にコピーしないでください。これはよくある間違いです。

constructor(props) {
super(props);
// してはいけません
this.state = { color: props.color };
}
この問題はそれが不要(代わりに this.props.color を直接使用することができるため)であり、バグの作成につながる(color プロパティの更新は state に反映されないため)ことです。

意図的にプロパティの更新を無視したい場合にのみ、このパターンを使用してください。その場合は、プロパティの名前を initialColor または defaultColor に変更してください。その後、必要に応じてキーを変更することで、コンポーネントにその内部の state を「リセット」させることができます。

もしあなたが props に依存する何らかの state が必要だと思うなら、どうすればいいのか学ぶために私達の派生 state を避けることについてのブログ記事を読んでください。

propsの値をconstructorの中で初期値として与えると、子コンポーネントは親のstateの変更を感知できないようです。
多くのサイトでこのような書き方をしていたので、結構間違えている人も多いと思います。

結局、

constructor(props) {
  super(props);
  this.state = {postUser: props.postUser};
}

としているのをやめて、直接子コンポーネント内でprops.postUserを使えば解決です。
super(props);を消すと子コンポーネントでpropsが使えなくなるので、これは残しておきます。

教訓

結局、公式が一番強い。