根据文件在拖放位置的顺序在Firestore中排序 [英] Order documents in firestore based on their drag and drop position
问题描述
我的目标是渲染 LinkContainer 组件，以使其位于我的拖放上下文中:
My goal is to render my LinkContainer components in order that they are in my drag and drop context:
<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 设置为新顺序的功能:
Here is the function that allows me to drag and drop while also setting links to the new order:
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));
};
当通过重新加载页面上的 links 进行映射时，如何更新Firebase记录，以使 LinkContainer 的显示顺序最后一次?
How can I update my firebase records so that the LinkContainer's render in the last order when mapping through links on a page reload?
我是否必须在文档本身上创建索引，并使用 LinkContainer
Do I have to create an index on the document itself and update that with the position of the LinkContainer
推荐答案
根据您的建议添加一个属性以将其用作索引，我想分享以下观点:
Based on your proposal to add a property to use it as index, I want to share the following observations:
例如，使用这种方法，您需要更新列表中的所有元素以便在数据库上重新创建新订单，这将在每次移动对象时执行.
For example, with this approach you need to update all elements on your list in order to recreate the new order on the database, this will be performed every time that an object is moved.
如果这是一个很小的集合，则可以使用，但是，如果您的集合中有很多对象，或者如果您移动了很多对象，这将转换为很多读写操作.
If this is a small collection this would work, but if your collection has a lot of objects or if you move your objects a lot this will be translated into a lot of read and write operations.
在最坏的情况下
(documents in collection) * (# of movements)
另一种选择是创建具有所需顺序的数组(数组在其顺序上始终是静态的)，例如，这是集合中对象的默认状态
Another alternative is to create an array(arrays always are static on his order) with desired order, for example this is the default state of the objects within collection
["1a","1c","2b","3x"]
但是在前端移动之后，看起来像这样
But after the movements on the frontend this looks like this
["1a","2b","3x","1c"]
前端的状态可以存储在文档的单独集合中的数组中，以便不修改原始对象并避免在每次移动中重新更新所有元素，但这将继续受到影响用户在前端执行的移动量，还需要根据集合上文档的创建或删除来更新数组.
The state of the frontend can be stored in an array within a document in a separate collection, in order to not modify the original objects and avoid to re-update all elements in each movement, but this will continue to be affected for the quantity of movements that the users perform in the frontend and also you need to be updated the array based on creation or deletion of documents on the collection.
您将必须按照阵列顺序以所需的方式显示您的信息.
You will have to follow the array order to display your information in the desired way.
最后一种选择，可能是效果较差的方法，每次发生移动时都要重写完整的集合(带有前端快照)，将集合重写为一次写入操作，但这会在将来出现并发操作问题.
The last alternative and maybe the less effective is rewriting the complete collection(with a Frontend snapshot) every time a movement happen, rewrite a collection counts as a single write operation, but this can generate future problems with concurrent operations.
这篇关于根据文件在拖放位置的顺序在Firestore中排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
