javascript中的数组映射更改数组中的所有元素答案

【问题标题】：Array Map in javascript changes all the element in the arrayjavascript中的数组映射更改数组中的所有元素
【发布时间】：2019-06-22 13:42:44
【问题描述】：

我在 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"}]

【问题讨论】：

你如何构建/创建this.props.productList。听起来你的问题是你有一个指针数组都指向同一个对象
@Pointy 如果我将地图返回重新分配给 props.productList，也会发生同样的情况
Array.prototype.map() 的回调应该返回新的值来构建一个新的数组。当您直接/就地更改数组中的值时，您的脚本应使用.forEach()。
我不太确定是什么原因造成的，但 React 的核心原则是 props 应该是不可变的 - 也就是说，您不应该就地更改它们。
@xcsob 不要改变你的数据，尤其是props，如果这些道具一遍又一遍地包含相同的对象this.mappedproductList = this.props.productList.map(item => ({ ...item, key: Math.random().andSoOn }));

标签： javascript arrays react-native dictionary

【解决方案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)

【讨论】：

很好，@Nick！
“使用类似 lodash...” - 与其添加另一个库/解决方法，不如解决问题的根源。跨度>
@Andreas，我不反对，lodash 的clone 只是一种简单的方式来演示这个概念，而无需访问可能在幕后的任何代码。
你是对的，我没有在我的 redux 商店中使用克隆。非常感谢！

【解决方案2】：

继续@kshetline 所写的内容。

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

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

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

让我知道你的想法！

【讨论】：