小道具を詳細に更新する際にコンポーネントを更新しない

Question

私は上にマップし、その配列内の各項目の子コンポーネントを返すために使用している小道具を持つComponentを持っています。それらのアイテムのそれぞれは、オブジェクトの別の配列です。しかし、私はこのような内部配列内のアイテムへの更新を行います。

let newInnerArray = getInnerArray(itemIndex); //assume this is a function that gets the correct inner array by the index 

    newInnerArray[innerArrayIndex].name = "changed name"; 

    arrayObjs[itemIndex].innerArray = newInnerArray; 

ザ・私は内側の配列への更新を行ってきましたし、それらの数を変更していないため、コンポーネントが更新されない反応します（これにより更新がトリガーされます）。 はここで小道具を明確にするためにどのように見えるかの簡易版です。

[{ 
     name: "name 1", 
     innerArray: [ 
      { 
       innerName: "inner name 1" 
      } 
     ] 
    }] 

だから私のコンポーネントで、私はオーバーマッピングてる小道具が外側の配列です。そして、私が小道具のアイテムの "innerName"の1つを更新すると、そのコンポーネントの更新は行われません。更新をトリガする

、私は外側の配列の項目のそれぞれにダミーの属性を追加し、それを私はこのような内部配列に更新させるたびに更新しています：

arrayObjs[itemIndex].date = performance.now(); //using performance.now() because it always produces a unique value 

は今小道具を作りますこのように見えます：

[{ 
    name: "name 1", 
    date: performance.now(), 
    innerArray: [ 
     { 
      "innerName": "inner name 1" 
     } 
    ] 
}] 

これは動作しますが、非常にハッキーです。その小道具の1つで内部配列を更新するたびに、コンポーネントを強制的に更新するより良い方法はありますか？

PS：申し訳ありませんが、私はこれをうまく説明していないか、混乱しています。私は誰かが理解していない場合、さらに説明します。

Answer 1

Reactはあなたのケースで浅い比較をしているようです。オブジェクトを比較するとき、shallow-compareは参照を比較するだけです（「同じオブジェクトを指していますか？」）。ここにいくつかのオプションがあります：

• あなたの州にはimmutableJSを使用してください。私は私のアプリケーションでこのようにしています。
• 手動lodashisEqual（またはunderscore isEqual）でshouldComponentUpdateを使用して、新しいpropsを比較し、あなたの内側の配列

const innerArray = getInnerArray(itemIndex); 
 
    let newInner = [...innerArray];

• のクローン（コピー）を作成します。