ReactJs: マップ関数を使用した後に親配列が更新される

Question

基本的に親配列から抽出された新しいキーを配列に挿入しようとしています。抽出された配列に新しいキーを挿入するだけでストア内のメイン配列が変更される理由がわかりません。

これは、カスタム配列に新しいキーと値のペアを追加する方法です

リーリー

以下は出力です:

コンソール 1.: newArray

リーリー

コンソール 2.: 親配列

リーリー

newArray 値で変更される理由。

試してみました: newArray.map(obj => ({ ...obj, [inputType]: "textField"}));

Answer 1

JavaScript の配列とオブジェクトは参照によって渡されることを理解しておくことが重要です。これは、配列またはオブジェクトを変更すると、その配列またはオブジェクトへのすべての参照に反映されることを意味します。

この場合、配列-->オブジェクト-->配列-->オブジェクトがネストされすぎています。したがって、抽出するときは必ず新しい配列またはオブジェクトを作成してください。ここでは、ES6 ... 構文を使用して新しい配列/オブジェクトを作成します。 = を使用してその参照をコピーするだけで、変更が反映されます。

以下のコードはまだ最適化されていませんが、理解していただければ幸いです。

リーリー