javascript - 删除后 Firebase 返回带有 undefined object 的数组

Question

从 Firebase 数据库中删除元素时遇到问题。结构如下(只是一个示例):

{
  "users":
  [
    {
      "id": 0,
      "name": "Toma Broome"
    },
    {
      "id": 1,
      "name": "Boyd Bolens"
    }
  ]
}

我正在获取用户列表，连接是这样的:

firebase.database().ref("/users/").on("value", snap => {
    users = snap.val();
    console.log( users ); // pay attention to this line
    usersLoop();
});

然后我在屏幕上渲染元素并尝试删除一个元素:

firebase.database().ref(`/users/${targetEl}`).remove();

如果我检查 Firebase 控制台，该元素实际上已从数据库中删除，但用户数组包含 undefined 值，并且在删除一些元素后它返回一个对象而不是数组。

这是删除数据库第一个位置的三个元素后的控制台。我的意思是我获得了完整的用户列表(我正在使用 JSON 文件上传)，我删除了第一个元素，然后所有其他元素都重新呈现在 DOM 中。然后我再次删除第一个元素，最后当我第三次删除第一个元素时，我从 firebase 获得了一个对象，显然没有呈现任何内容，因为代码需要一个数组

(5) [undefined × 1, Object, Object, Object, Object]
(5) [undefined × 2, Object, Object, Object]
Object {3: Object, 4: Object}

您还可以看到，当数据库中的元素较少时，数组会一直返回 5 的长度。

我正在考虑的一个选项是使用 Lodash 从返回的集合中删除未定义的元素和/或将其转换为数组，但这将违背应用程序展望 future 的任何可扩展性选项。

最后，似乎比任何事情都更奇怪的是，数据库结构似乎突然发生了变化，而在视觉上看起来却和原来一模一样。

这是firebase上的数据库结构

-users
 |-0
  |-id:0
  |-name:value
  |-otherprops:value
 |-1
  |-id:1
  |-name:value
  |-otherprops:value

Answer 1

@cartant 提供的链接给出了答案。

是的，firebase 确实容忍其数据中的数组结构，但不建议使用它们，除非特定数据不会发生太大变化或根本不会发生变化。在我的情况下(创建某种 CRUD 应用程序)是不推荐的，只需使用对象结束一切就可以了。问题是，如果您上传一个包含数组的 json 文件，firebase 会将其转换为一个对象结构，使用整数作为数组中每个元素的键。然后当我开始删除元素并达到这一点时:

if (!opt_exportFormat && allIntegerKeys && maxKey < 2 * numKeys) {
  // convert to array.
  var array = [];
  for (var key in obj)
    array[key] = obj[key];

  return array;
} else {
  if (opt_exportFormat && !this.getPriority().isEmpty()) {
    obj['.priority'] = this.getPriority().val();
  }
  return obj;
}

删除特定数量的元素后，代码传递到语句的 else 部分，最终导致 firebase 返回一个对象，从而造成整个问题。

我最终得到了这种类型的结构:

{
  "users":
  {
    "user_00": {
      "id": 0,
      "name": "Toma Broome"
    },
    "user_01": {
      "id": 1,
      "name": "Boyd Bolens"
    }
  }
}

并且使用 lodash 循环遍历对象(或者它可以是 for in 循环)我能够以与之前相同的方式获取数据使用数组。最后使用对象结构，我没有再得到任何包含未定义元素的集合。

@cartant，非常感谢!!!我肯定从你的评论中学到了一些东西。我希望你能发布一个答案，这样我就可以将它标记为问题的解决方案并点赞它，先生，你赢了!!