根据拖放位置对 firestore 中的文档进行排序

我的目标是呈现我的LinkContainer组件，以便它们位于我的拖放上下文中：

<DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul
                className="characters"
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {links.map((l, index) => {
                  return (
                    <Draggable key={l.id} draggableId={l.id} index={index}>
                      {(provided) => (
                        <li
                          className="draggable"
                          {...provided.draggableProps}
                          {...provided.dragHandleProps}
                          ref={provided.innerRef}
                        >
                          <LinkContainer
                            linkTitle={l.linkTitle}
                          />
                        </li>
                      )}
                    </Draggable>
                  );
                })}
              </ul>
            )}
          </Droppable>
        </DragDropContext>

这是允许我拖放同时设置的功能links新订单：

 const reorder = (links, startIndex, endIndex) => {
    const result = Array.from(links);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
  };

  // handle drag end
  const handleOnDragEnd = (result) => {
    console.log(result);
    setLinks(reorder(links, result.source.index, result.destination.index));
  };

我如何更新我的 firebase 记录，以便LinkContainer映射时按最后顺序渲染links在页面重新加载时？

我是否必须在文档本身上创建索引并使用文档的位置更新该索引LinkContainer

根据您添加属性以将其用作索引的建议，我想分享以下观察结果：

例如，使用这种方法，您需要更新列表中的所有元素，以便在数据库上重新创建新订单，每次移动对象时都会执行此操作。

如果这是一个小集合，这会起作用，但如果您的集合有很多对象，或者如果您大量移动对象，这将转换为大量读写操作。

在最坏的情况下

(documents in collection) * (# of movements)

另一种选择是创建一个具有所需顺序的数组（数组在其顺序上始终是静态的），例如，这是集合中对象的默认状态

["1a","1c","2b","3x"]

但是在前端的动作之后，它看起来像这样

["1a","2b","3x","1c"]

前端的状态可以存储在单独集合中文档内的数组中，以便不修改原始对象并避免每次移动时重新更新所有元素，但这将继续受到数量的影响用户在前端执行的操作，并且您还需要根据集合上文档的创建或删除来更新数组。

您必须遵循数组顺序才能以所需的方式显示您的信息。

最后一种替代方案（也许效率较低）是每次发生移动时重写完整集合​​（使用前端快照），重写集合算作单个写入操作，但这可能会在并发操作中产生未来问题。