[解決済み] componentWillReceivePropsライフサイクルメソッドはいつ使用するのですか？

質問

私はReact/Reduxの初心者ですが、状態について問題があります。

TrajectContainer.jsx

class TrajectContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            trajects: props.trajects,
            onClick: props.onClick
        };
    }

    componentWillReceiveProps(nextProps) {
        console.log('componentWillReceiveProps', nextProps);
        this.setState(nextProps);
    }

    render() {
        // When the componentWillReceiveProps is not present, the this.state will hold the old state
        console.log('rerender', this.state);
        return (<div className="col-md-6">
            <h2>Trajects</h2>
            <button className="btn btn-primary" onClick={this.state.onClick}>Add new Traject</button>
            {this.state.trajects.map(traject => <Traject traject={traject} key={traject.name}/>)}
        </div>)
    }
}

const mapStateToProps = function (store) {
    console.log('mapToStateProps', store);
    return {
        trajects: store.trajects
    };
};

const mapDispatchToProps = function (dispatch, ownProps) {
    return {
        onClick: function () {
            dispatch(addTraject());
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TrajectContainer);

リデューサが新しい状態を返すと、コンポーネントは新しいデータで再レンダリングされます。

しかし：componentWillReceiveProps関数を削除すると、render()関数が古い状態を持ちます。

mapStateToPropsで受信したデータを確認したところ、こちらは新しいNew Stateでした。 ですから、レンダー関数が新しいデータを受信するために、なぜcomponentWillReceiveProps関数が必要なのか理解できません。

私は何か間違っているのでしょうか？

解決方法は？

componentWillReceiveProps は、新しいプロップス値でステートの値を更新したい場合に必要です。このメソッドは、プロップス値に何らかの変更が発生するたびに呼び出されます。

あなたの場合、なぜこのcomponentWillReceivePropsメソッドが必要なのでしょうか？

propsの値をstate変数に格納し、このように使用しているからです。

this.state.KeyName

そのために必要なのが componentWillReceiveProps ライフサイクルメソッドで状態の値を新しいpropsの値で更新すると、コンポーネントのpropsの値だけが更新されることになりますが 自動的に状態が更新されることはありません。 . もし、状態を更新しないのであれば this.state は常に初期データを持ちます。

componentWillReceiveProps は、propsの値をstateに保存せず、直接使用する場合は不要です。

this.props.keyName

これでreactはrenderメソッド内で常に更新されたpropsの値を使用し、propsに変更があった場合は新しいpropsでコンポーネントを再レンダリングするようになりました。

の通りです。 DOC :

componentWillReceiveProps()は、マウントされたコンポーネントが起動する前に呼び出されます。 は新しいプロップを受け取ります。に対応して状態を更新する必要がある場合、その状態を更新します。 プロップの変更（例えば、リセットする）を行うには、this.props のthis.setState()で状態遷移を行います。 このメソッド

Reactは、初期プロップでcomponentWillReceivePropsを呼び出すことはありません。 マウントを行います。このメソッドを呼び出すのは、コンポーネントのプロップの一部がマウントされる可能性がある場合のみです。 が更新されます。

提案します。

propsの値をstateに格納せず、直接 this.props を作成し、uiコンポーネントを作成します。