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”，即使它在代码后面发生。我不明白如何阻止它。我只想要一个变量'order'，其中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()，它会在道具中为您提供数组的副本，并允许您稍后使用此数组而不更改原始道具。

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

Answer 3

这里发生了两件事。

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

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

推动功能改变道具的反应

3 个答案: