如何在firebase firestore中构建拖放数据？

问题描述

我想为我的 react-firebase 应用程序添加实时拖放支持。现在的结构就像，我有“会话”集合，在它下面有“想法”集合，它有多个字段，我正在尝试为“想法”添加拖放支持。

列名在我的情况下并不重要，我肯定会一直有 5 列，而且目前我的拖放支持在不更新 firestore 的情况下运行良好。在这一点上，我不确定如何构建数据。在本地，我的数据结构如下：

import jsPDF from "jspdf";
import "jspdf-autotable";
import { datas } from "./data";
import { renderToString } from "react-dom/server";
import PdfDocument from "./PdfDocument";
export default function App() {
  const columns = [
    { title: "Rank",dataKey: "Rank" },{ title: "Name",dataKey: "Name" },{ title: "count",dataKey: "count" }
  ];

  var rows = datas?.map((data) => ({
    Rank: data?.Rank,Name: data?.Name,count: data?.count
  }));

  const downloadPdf = () => {
    var doc = new jsPDF("p","pt");
    doc.setFontSize(20);
    doc.setTextColor(40);
    doc.setFontStyle("normal");
    doc.autoTable(columns,rows,{
      startY: 70,margin: { horizontal: 10 },styles: { overflow: "linebreak" },bodyStyles: { valign: "top" },columnStyles: { email: { columnWidth: "wrap" } },theme: "striped",showHead: "everyPage",didDrawPage: function (data) {
        // Header
        doc.setFontSize(16);
        doc.setTextColor("#161C22");
        doc.text("Table",data.settings.margin.left,35);
        doc.text("Brand",465,34);

        // Footer
        let str = "" + doc.internal.getNumberOfPages();
        doc.setFontSize(10);

        // jsPDF 1.4+ uses getWidth,<1.4 uses .width
        let pageSize = doc.internal.pageSize;
        let pageHeight = pageSize.height
          ? pageSize.height
          : pageSize.getHeight();
        doc.text("Footer text",pageHeight - 10);
        doc.text(575,830,str);
      }
    });

    doc.save("random.pdf");
  };

  return (
    <div className="App">
      <h1>Hello CodeSandBox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={downloadPdf}> Download PDF </button>
    </div>
  );
}

您可以将数组视为列，并且其元素在这些列内进行排序。我尝试在想法中添加列和订单字段，但我认为无法正确更新它。

也许我可以实现这样的数据结构：

[[{single idea},{single idea}],[{single idea}],[],[]]

就像你在它下面有一个数组，有一个以列名作为键值的映射，在它下面有另一个具有想法映射的数组。同样，我不确定如何实现这样的结构，这是我的重新排序和移动功能：

重新排序：用于对列内的元素进行排序

[{col1: [{},{},]},{col2: [{}]}]

移动：将元素移动到其他列

    const reorder = (list,startIndex,endindex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex,1);
    result.splice(endindex,removed);
        console.log(result);
    return result;
    };

解决方法

我建议您查看此 answer，其中有多种替代方法可以解决您的问题。

其中一个建议是创建一个具有所需顺序的数组，例如。初始顺序：[1,2,3,4,5] 和用户移动后：[2,1,5]，并将其存储在文档中的数组中，并在一个单独的集合中，以避免在每次移动中重新更新所有元素。