删除后 Firebase 返回带有未定义对象的数组

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 从返回的集合中删除未定义的元素和/或将其转换为数组，但这将违背应用程序展望未来的任何可扩展性选项。

最后，似乎比什么都奇怪的是，数据库结构似乎突然发生了变化，而视觉上一直保持原来的样子。

这是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，非常感谢！！！我肯定会从你的 cmets 学到一些东西。我希望您能发布一个答案，以便我将其标记为问题的解决方案并点赞，先生，您赢得了它！