push 函数在 react 中改变 props答案

【问题标题】：push function changes props in reactpush 函数在 react 中改变 props
【发布时间】：2017-01-02 20:43:05
【问题描述】：

这是我的问题。

当我使用 push() 函数时，它会在 react 中改变我的 props。

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”的级别，这个道具也有“优先权”，即使它发生在代码的后面。我不明白如何让它停止这个。我只想要一个变量“订单”，其中包含优先权，我不希望我的道具改变。

请帮忙

【问题讨论】：

标签： javascript arrays reactjs push array-push

【解决方案1】：

永远不要改变道具，你在这里做的。

改为创建一个新数组，不要修改原始数组。

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

Array.push()“变异”（更改/修改）原始数组。 Array.concat() 返回一个新数组，并且不修改原来的。

【讨论】：

【解决方案2】：

正如 Andy Ray 所说，不要直接更改道具。

正确的做法是使用const orders = this.props.orders.warenkorb.slice()，它会给你一个props中的数组的副本，让你以后可以在不改变原来props的情况下使用这个数组。

最后，您的第一个 console.log('#### TOKEN ORDER #####1', this.props.orders.warenkorb) 向您显示后一个值的原因是因为控制台将通过引用显示这些值。如果您想要打印位置的确切值，可以使用：console.log('#### TOKEN ORDER #####1', JSON.stringify(this.props.orders.warenkorb));

【讨论】：

【解决方案3】：

这里发生了两件事。

首先，您正在修改对象中的道具。即使您将属性保存在另一个变量中，您所做的只是保存对该属性的引用。如果你想避免这种情况，你可以像 Andy Ray 指出的那样使用 concat。

第二件事。即使在 TOKEN ORDER 1 中也能看到变化，因为 console.log 可能有点棘手。由于对象存储对其属性的引用，因此如果您稍后更改对象，它将向您显示最新更新。 More on this here.

【讨论】：