Firestore 吓坏了

Question

我刚刚在另一个域（生产 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 集合的播放列表中加载视频列表，然后在用户添加新视频或再次向上/向下移动保存后。

有什么线索吗？

编辑：在这种疯狂之后，应用程序几乎没有请求并按预期工作。

Answer 1

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

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

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