起こったこと
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が使えなくなるので、これは残しておきます。
教訓
結局、公式が一番強い。