火炉吓坏了答案

【问题标题】：Firestore freaking out火炉吓坏了
【发布时间】：2019-10-07 23:44:15
【问题描述】：

我刚刚在另一个域（生产 url）下打开了我的项目，当我打开网络请求时，我看到了这个：

https://i.imgur.com/NxgTmIf.mp4

这花了很长时间（8 分钟或更长时间。）而且我的 CPU 热得要命，我做错了什么？

我的应用程序很简单，我怀疑它的根源是这段代码：

  const [items, setItems] = useState([]);

  const publish = async () => {
    const batch = firestore.batch();

    items.forEach(({ id }, index) => {
      batch.update(firestore.collection('v1').doc(id), { '#': index });
    });

    await batch.commit();
  };

  const onCompletion = querySnapshot => {
    const arr = [];

    querySnapshot.forEach(document => {
      const { vid: { id: vid }, '#': index } = document.data();

      const { id } = document;

      arr.push({ id, vid, index });
    });

    setItems(arr);
  };

  useEffect(() => {
    const unsubscribe = firestore
      .collection('v1')
      .orderBy('#')
      .onSnapshot(onCompletion);

    return () => {
      unsubscribe();
    };
  }, []);

  useEffect(() => { publish(); }, [items]);

  const handleSortEnd = ({ oldIndex, newIndex }) => {
    if (oldIndex === newIndex) {
      return;
    }

    setItems(arrayMove(items, oldIndex, newIndex));
  };

基本上，它的作用是从 Firestore 集合中的播放列表加载视频列表，然后在用户添加新视频或再次上/下保存之后。

有什么线索吗？

编辑：在这种疯狂之后，应用程序执行的请求很少并且按预期工作。

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

如果我正确地遵循了这一点，您就有一个useEffect() 订阅了对您的“v1”firestore 集合的更改。当组件首次加载以及集合文档的后续更改时，将触发 onSnapshot 事件调用 onCompletion。 onCompletion 然后将集合中的所有文档提取到一个新数组中，然后将其分配给您的items 状态。您的另一个useEffect() 语句，在items 更改时触发，调用publish 函数，该函数执行同一'v1' 集合中文档的批量更新......这将触发onSnapshot 再次调用onCompletion 和循环会不停地重复。

在组件加载时检索集合的文档一次可能更有意义，并使用结果初始化 items 状态，然后在更新 items 时将更改的文档写回集合.您不需要通过集合订阅再次检索文档，因为您已经在 items 数组中获取了这些文档。

【讨论】：

【解决方案2】：

我认为加载您的状态需要多次访问，原则上应该更新。为什么不在将传入的快照提交到状态之前根据需要对其进行排序。给出一个条件，只在 'items' 具有预期值时进行排序。

另一种方法是“setItems”，就像来自 firestore 一样，并在渲染状态期间对数据进行排序，而不是在渲染之前点击状态。

此外，每次排序时为您的状态设置一组新数据是突变。 React 会将它们作为渲染前的新数据，效率不高。

【讨论】：