オブジェクトの配列に対する反復setStateはすべてのコンポーネントを再レンダリングします

Question

私はReactを使用しており、状態のオブジェクトの配列を更新したいとします。

const newState = this.state.elements.slice().concat({key: 'val'}); 
this.setState({elements: newState}); 

しかし、私はこの問題に遭遇した問題は、これらのデータをレンダリングする機能やコンポーネントにバインドされたときに、それがあることであるすべてのコンポーネントを再レンダリング：インターネットでの全体的な答えは、以下に同様のアプローチを使用することでした。

例（マップをマッピングしながらインデックスを取得するためにlodashから使用されている）が挙げられる：

render() { 
    return (
    <div> 
     {map(this.state.elements, (el, index) => <Component key={`el-${index}`} el={el} />)} 
    </div> 
); 
} 

ても、状態変化毎回、配列順序が変更されないと、キーの構成要素の変更をdoesntの、コンポーネントをゼロから再レンダリングしてマウントします。

この問題の解決策はありますか？

ベスト、起こっていただきました Y

Answer 1

は、あなたが呼び出すSETSTATEリアクト仮想ドムの差分状態と呼び出しが再びレンダリングすることです。各コンポーネントをレンダリングするマップ関数に呼び出しをレンダリングします。親コンポーネントが変更されるため、各コンポーネントは破棄されて再描画されます。

これはReactの通常の正常な動作です。あなたがそれを求めていること、状態を変更したこと、コンポーネントを再描画することなどです。

しかし、あなたの質問は、どのように私の新しいコンポーネントを再描画せずにコンポーネントのリストに追加するのですか？

私は、あなたが反応のユニークなキーを使って配列アイテムのインデックスに頼っていると思います。

<Component key={`el-${index}`} 

状態を更新するたびに永久に変更されます。あなたがする必要があるのは、名前や文字列、生成されたキーなどのデータを使用することです。

マップ関数のインデックス値だけを使用しています。もちろん、リストに新しい要素を追加した後は、それぞれのキー値が変更されたため、再レンダリングがトリガーされます。

あなたはこのような何かをした場合：

アイテムIDが一定ではなく一意の値がデータベーステーブルの主キーのように、ある

<Component key={`el-${item.id}`} 

。それは再描画されません。キーには決定的な値が必要です。

はReact Docsや詳細については、この他post参照してください。