プッシュ機能が反応して小道具を変更する

Question

これは私の問題です。

私はpush（）関数を使用すると、反応中の私の小道具を変更します。

const prioship = (this.props.orders.prioshipping === false ? {'name':`Regular Shipping`,'price':'0','currency':'EUR','quantity':1, 'description': ''} : {'name':`Priority Shipping`,'price': this.props.prices.shipping['A'].toString() ,'currency':'EUR','quantity':1, 'description': ''}) 
console.log('#### TOKEN ORDER #####1', this.props.orders.warenkorb) 
const orders = this.props.orders.warenkorb 
const order2 = this.props.orders.warenkorb 

orders.push(prioship) 
console.log('#### TOKEN ORDER #####2',order2, this.props.orders.warenkorb) 

そうでもコンソールログ「TOKEN ORDER 1」のレベルでこの小道具は、それが後のコードで起こっていても、それに「prioship」を持っています。私はそれを止める方法を理解していない。私はちょうどprioshipがそこにある変数 '注文'をしたい、私は自分の小道具を変更したくない。

助けを借りてください

Answer 1

ここでやっている小道具を決して変更しないでください。

代わりに新しい配列を作成し、元の配列を変更しないでください。

const orders = this.props.orders.warenkorb.concat(prioship); 

Array.push()元の配列を「変更」（変更/変更）します。 Array.concat()は新しい配列を返し、元の配列は変更しません。

Answer 2

Andy Rayが述べたように、小道具を直接変更しないでください。

適切な方法は、const orders = this.props.orders.warenkorb.slice()を使用することです。これは、小道具に配列のコピーを与え、元の小道具を変更せずに後でこの配列を使用できるようにします。

最後に、第1のconsole.log('#### TOKEN ORDER #####1', this.props.orders.warenkorb)があなたに後の値を表示しているのは、コンソールが参照によって値を表示するためです。正確な値を印刷したい場合は、console.log('#### TOKEN ORDER #####1', JSON.stringify(this.props.orders.warenkorb));

Answer 3

ここでは2つのことが起こっています。

まず、オブジェクトの小道具を変更しています。別の変数にプロパティを保存しても、そのプロパティへの参照を保存するだけです。 Andy Rayが指摘したように、あなたがそれを避けるためには、concatを使うことができます。

第2のこと。 console.logはややこしいことがあるので、TOKEN ORDER 1でも変更が表示されます。オブジェクトはそのプロパティへの参照を格納するので、後でオブジェクトを変更すると最新の更新が表示されます。 More on this here.