react.js setStateの更新が子コンポーネントに伝わらない

Question

class Test extends Component {
	constructor(props) {
		super(props);
		this.state = {
			display:"none"
		}
	}

	render() {

	return (
		<div>
			<button onClick={() => {this.setState({"display":"block"})}}>ボタン</button>
			<Childs data={this.state.display} />
		</div>
	)

	}
}

class Childs extends React.Component {
	constructor(props) {
	super(props);
		this.state = {
			display:this.props.data
		}
	}
	render() {
	console.log(this.state.display);//期待する値"block"

	return (
		<div className={style={{"display":this.state.display == "none"? "":"block"}}>あああ</div>
	)
	}
} 

上記のように親で変更したstateを子コンポーネントに伝えて、
取得したいのですが、子コンポーネントで取得できる値はずっと"none"のままです・・・
子コンポーネント構造をやめればもんだいないのですが、
実際はChildsの部分の数が多くできればこの構造のまま実現したいのですが、
どのように改善すればよいでしょうか？

Answer 1

propが更新されたときに何らかの処理をする必要があるときには、 componentDidUpdate かgetDerivedStateFromProps でpropの変更をフックしてあげる必要があります。すでにmaisumakunさんからご指摘のとおりpropsをstateにそのまま入れ込むのは推奨されないというか、そんなことをしなくてもいいように作れるはずなので、ご認識の通り設計を見直されるとよいと思いますが、まあこれでも動くんじゃないのというコードを参考までに載せておきます。

アンチパターンについては You Probably Don't Need Derived State も参考になるかと思います

class Childs extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            display:this.props.data
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if(this.props.data === nextProps.data) return null

        return {
            display: nextProps.data
        }
    }

    render() {
        console.log(this.state.display);//期待する値"block"

        return (
            <div className={style={{"display":this.state.display == "none"? "":"block"}}>あああ</div>
        )
    }
}

Comments

[cheche0830]

ありがとうございました！
getDerivedStateFromPropsはバージョンのせいかしようできなかったのですが、componentWillReceivePropsで同様の処理ができました。
今回はいったんそちらで進めたいと思います。助かりました。

Answer 2

Childrenのthis.stateはコンストラクタでの代入しかしていないので、最初のpropsの値が記録され、その後は変化しません。

特にChildren独自の操作を行わず、親から来るdisplayをそのまま使うだけなら、そのままthis.props.displayを参照してください。

Comments

[cheche0830]

ありがとうございます。
省略して記載していなかったのですが、子コンポーネント側からも
`display:this.props.data`部分の値を分岐などで可変させる予定でして、
`this.props.display`を直接参照してしまうとちょっと具合が悪く・・・

最初以外も値を変化させる方法はありませんでしょうか・・？

[maisumakun]

> "display:this.props.data"部分の値を分岐などで可変させる予定でして、

では、そのたびに必要なpropsを参照するような関数を作って、それ経由で必要な値を取得してください。

propsからstateへのコピーは、推奨されていない操作です。

https://ja.reactjs.org/docs/react-component.html#constructor

[cheche0830]

ああ、そうなんですね。。知りませんでした。ありがとうございます。
あらかじめ必要なstateを親に用意しておき、
それを子コンポーネントから関数で参照する形に作り替えたいと思います！
勉強になりました★