Question

我有一个用Javascript（React Native）编写的对象向量，我需要向数组的每个项目添加一个不同的随机键。问题是，如果我将key属性添加到一个对象，它将对数组的每个元素更新相同的键。

我什至不知道这是问题所在。

我的原始数组是：

[{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3},{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3}]

我得到的结果是：

Lista prodotti randomico: [{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3,"key":"x4idec"},{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3,"key":"x4idec"}]

仅当项目为“相同”时才会发生问题。

componentWillMount(){

    this.props.productList.map(item => {
      item.key = Math.random().toString(36).substring(7)
    })

}

预期结果是每个对象上的键都不相同，如下所示：

Lista prodotti randomico: [{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3,"key":"x4idec"},{"nome":"insalata di mare","prezzo":0.3,"qr_code":"qr_valore","quantita":3,"key":"d2jdss"}]

Answer 1

您确定数组的每个元素实际上是一个不同的对象吗？

如果您执行以下操作：

let a = {foo: 'bar'};
let b = a;
let array = [a, b];

array如下所示：

[{foo: 'bar'}, {foo: 'bar'}]

如果您如上所示使用map，则两个元素的确会一起改变，因为数组的每个元素都是同一对象，只是同一对象出现在更多位置数组中的一个索引。

array.map((item, index) => item.key = index)

将导致：

[{foo: 'bar', key: 1}, {foo: 'bar', key: 1}]

不像您所希望的那样[{foo: 'bar', key: 0}, {foo: 'bar', key: 1}]。

要确保数组的每个元素都独立更改，您需要确保每个元素都是独立的对象。使用lodash的clone函数会有所帮助。

array.map((item, index) => _.clone(item).key = index)

Answer 2

紧接着@kshetline写道。

我相信这应该是您所需要的，而无需使用外部库。

const products = this.props.productsList.map((product, key) => ({
  ...product,
  key
}));

这里的关键是要创建一个新对象，但是如果您拥有key属性，它将被覆盖！

让我知道您的想法！

JavaScript中的数组映射会更改数组中的所有元素

2 个答案: