コンポーネントの機能とonChange関数の間の競合を管理する

Question

私は他の誰かが書いたかなり複雑な反応アプリを使って作業しています。私はメッセージスレッドの最後にフォームフィールドのデフォルト値を設定したいと思います。

子レンダリング関数は、すべてのデータがロードされる前に複数回呼び出されることがあります。私のフォームコンポーネントのデフォルト値は、スレッドの最後の値に依存します。それは前に3回を取った場合は正しい値を表示されません

constructor(props) { 
    super(props); 

    this.state = { 
     replyType: this.getReplyType(), 
    }; 
    } 

：私はコンストラクタでreplyTypeを設定しています。そのため

と現在の小道具をもとに算出しgetReplyTypeでいくつかのロジックを持っています私たちは親からすべてのデータを得ました。だから、私のフォームの値を更新するためにこのような呼び出しを使用します：

componentWillReceiveProps(nextProps) { 
    this.setState({ 
     replyType: this.getReplyType(nextProps), 
    }); 
    } 

これは私に必要な初期状態を取得します。問題は、componentWillReceivePropsは、ユーザーが手動で選択した後も含め、毎回呼び出されることです。これは、選択テキストを上書きしますが、CSSのレンダリング方法...

changeReplyType = ({ value }) => { 
    this.setState({ 
    replyType: value, 
    }); 
} 

QUESTIONにいくつかのロジックを壊しません。変更はイベントハンドラによってトリガされた場合に実行されているからcomponentWillReceivePropsを防止する方法はありますか？

Answer 1

私はcomponentWillReceiveProps内部のif文と新しい小道具

componentWillReceiveProps(nextProps) { 
    // setState when props change from pending to not pending 
    // prevents function from being called when changeReplyType updates state 
    if (!nextProps.isPending && this.props.isPending) { 
     this.setState({ 
     replyType: this.getReplyType(nextProps), 
     }); 
    } 
    } 

を使用していました