Array（4）具有6个元素

Question

我遇到一个问题，其中有一个包含神秘重复项的数组。

在firebase中，我的对象包含数组

{
   ink_colors:
      0: 'Mauve',
      1: 'Mineral',
      2: 'Mocha',
      3: 'Navy' 

}

Firebase Web控制台：

当我的React应用收到对象时，控制台会报告

console.log(snapshot.val().ink_colors);

> Array(4) [ "Mauve", "Mineral", "Mocha", "Navy" ]

但是

访问数组时，它显然有6个项目

temp1.ink_colors
// => [ "Mauve", "Mineral", "Mocha", "Navy", "Mauve", "Mauve" ]

在Chrome 72.0.3626.121中

在Firefox 65.0.1中

尝试使用控制台日志和调试器调试此问题，我将控制台输出保存在全局变量temp1中，并得到两个不同的结果：

function receive(payload){
   console.log(payload);
   debugger;
}

> payload.ink_colors
< (4) ["Mauve", "Mineral", "Mocha", "Navy"]

> temp1.ink_colors
< (6) ["Mauve", "Mineral", "Mocha", "Navy", "Mauve", "Mauve"]

告诉我这个问题不是具有意外的空数组值的典型Firebase数组陷阱。

NPM软件包：

反应：16.8.2

redux：4.0.1

firebase：5.7.2

Answer 1

请确保您没有将元素添加两次，以防万一，您可以改进将结果数组过滤为唯一元素的新数组。

看看：get-all-unique-values-in-a-javascript-array-remove-duplicates

这也可能是该方法在firebase中添加元素的问题。

Answer 2

似乎您在某处有更改值的代码。以这个为例：

let arr = ["Mauve", "Mineral", "Mocha", "Navy"];
debugger
// somewhere in the code, the arr is being modified
arr.length = 6;
arr.fill('Mauve', -2)
// where you are trying to log arr
console.log(arr)

现在，打开开发人员工具并运行上面的代码段，您会看到arr的长度为4。但是实际上，您可以看到arr的长度为6，并且您注意到{{1 }}正在使用。

如果找不到罪魁祸首，则可以尝试使用debugger进行恶意修复：

Object.freeze

之后，您将能够看到实际的问题，其中包含使用该文件进行修改的这一行。例如。在摘要中，您可以看到：

let arr = ["Mauve", "Mineral", "Mocha", "Navy"];
Object.freeze(arr)
// somewhere in the code, the arr is being modified
arr.length = 6;
arr.fill('Mauve', -2)
// where you are trying to log arr
console.log(arr)

现在，您知道它在哪里。您最终可以解决问题，然后再次删除Error: { "message": "Uncaught TypeError: Cannot assign to read only property '2' of object '[object Array]'", "filename": "https://stacksnippets.net/js", "lineno": 17, "colno": 5 } 。