spreadメソッドはオブジェクトに対して機能しますか？あなたはどのようにオブジェクトをコピーしますか？

Question

私は、次があります。

constructor() { 
    super(); 
    this.state = { 
     lists: [], 
     items: {} 
    }; 
} 

のでthis.state.itemsがオブジェクトです。

今は持っている：

handleAddItem(s) { 
    var key = Object.keys(s)[0]; 
    var value = s[key]; 

    var allItems = {...this.state.items}; 
    allItems[key].push({name: value}); 

    console.log(allItems); 
    console.log(this.state.items); 
} 

this.state.itemsは、最初はヌルであるだけで、{}、sは名前のキーと値のペアを持つオブジェクトである：スヌーピー

var s={}; 
    s[this.props.idName] = this.refs.id.value; 

理由でconsole.logはどちらも同じですか？

Answer 1

オブジェクトのスプレッド構文が機能します。しかし、スプレッドシンタックスは、配列をコピーしている間、効果的に一段階深くなります。したがって、allItems[key]を突然変異させると、allItems[key]は同じオブジェクトを参照して突然変異を起こすことになります。 MDN docsによると

：

注： 配列をコピーしている間スプレッド構文が効果的に1つのレベル深くなります。したがって、次の例のように多次元の 配列をコピーするには不適切です（これは Object.assign（）とスプレッドシンタックスと同じです）。ネストされた状態のクローンを作成したい場合には

var a = [[1], [2], [3]]; 
var b = [...a]; 
b.shift().shift(); // 1 
// Now array a is affected as well: [[], [2], [3]] 

、あなたは

var allItems = { 
    ...this.state.items, 
    [key]: [...this.state.items[key]] 
}; 

var items = { 
 
    x: ['a'] 
 
}; 
 
var value="abc" 
 
var key='x' 
 
var allItems = { 
 
    ...items, 
 
    [key]: [...items[key]] 
 
}; 
 
console.log(allItems, 'before'); 
 

 
allItems[key].push({name: value}); 
 
console.log(allItems); 
 
console.log(items);

Answer 2

スプレッドは、オブジェクト上で動作するだろう。

hereのドキュメントを確認してください。 どのようなスプレッドはコピー参照であるので、結果は同じです。したがって、値（配列、オブジェクト）を変更すると、元のものに反映されます。

スプレッドを使用すると、基本的に浅いコピーがディープコピーにならないため、内部の値はそのまま残ります。