Reactネイティブの新しい小道具を受け取る、componentWillReceiveProps

Question

私は自分のコンポーネントに関するいくつかの更新に苦労しています。私はは州の中に小道具を設定してはならないと知っています。しかし、コンポーネントのアップデートを正しく行うためにこれを行う必要がありました。

componentWillReceiveProps(nextProps) { 
    this.setState({ 
     doctor: nextProps.data.name, 
     address: nextProps.data.address 
    }) 
} 

これを行うより良い方法はありますか？

shouldComponentUpdate: function(nextProps, nextState) { 
    return nextProps.id !== this.props.id; 
} 

が、私はme.c

Answer 1

のために非常によく野生動作しませんでした：>

componentWillReceiveProps(nextProps) { 
     this.props.data.name = nextProps.data.name; 
     this.props.data.name = nextProps.data.address; 
    }) 
} 

私はshouldComponentUpdateを使用しようとしていた - 私はこれを行う場合は、最良の方法でありますここで推測する。私が知覚するように、あなたはshouldComponentUpdateを適切に実装する問題を経験します。私はあなたがnextProps.dataオブジェクトを比較しようとすると、が等しくない場合でも、という結果にならないと信じています。その理由は、dataオブジェクトへのオブジェクト参照が異なるからです。その問題を解決するには、代わりにlodashの_.isEqualに似た深い比較を行う必要があります。

コメントで述べたように、componentWillReceivePropsのnextPropsを更新するのは恐ろしい考えです。あなたのコメントで

Answer 2

、あなたが言及：

私はアイテムが、私はまだそこに unfavouritedと他の項目は、これは完全に別の問題のように見える

姿を消したリストビューに戻ってくるときエリア。私の推測では、あなたが間違ってkeyをリストに使っていることでしょう。おそらくインデックス。キーは常に表示されているアイテムと一意でなければならず、インデックスはありません（たとえば、最初のアイテムは常にインデックス0で、リストを並べ替えるか最初のアイテムを削除すると別のアイテムはインデックス0になり、うまくいく。）Further explanation here。 「適切にコンポーネントをアップデート」について

：あなたは新しい小道具に渡すと

• 、新しい小道具で再レンダリング自動的に反応します。このためにはcomponentWillReceivePropsに何もする必要はありません。
• componentWillReceivePropsは、OLDとNEWの小道具を比較して状態を更新するためのものです。 （例えば、小道具の好きな数が上がったか下がったかを表示したい場合）
• shouldComponentUpdateはオプションです。主な目的は、パフォーマンスを向上させることですコンポーネントの動作に何の変更もありません：コンポーネントが変更されていないことを早期に通知します。あなたのコンポーネントが意図したとおりに動作しない限り、shouldComponentUpdateを含めないことをお勧めします。