javascript - 如何在 react-dnd 中将更新的 stae 值保存回数据库（mongo db）

Question

我是学习 react.js 的初学者。我使用 react-dnd 开发了一个简单的 todo 应用程序。我能够实现反应 onDragEnd 功能，其中每列中的卡片都可以在列内和列之间拖放。但是，一旦我刷新页面，页面就会重置，并且所有拖动的元素都不会保存。因此，我想知道，如何在后端的 react dnd 中永久保存拖动元素的位置。这里在 useState 下定义为“TO-DO、INPROGRESS、READY”的名称被识别为检索数据的键。此外，stage.staus 具有相同的值（TO-DO、INPROGRESS 或 READY）存储在 前端的数据库示例图片中

我的代码：

function ProjectsDashboard() {
  const [state, setState] = useState({
    //creating 3 columns
    "TO-DO": {
      title: "To do",
      items: [item, item2], //temporary data valuesa
    },
    "IN-PROGRESS": {
      title: "In Progress",
      items: [],
    },
    READY: {
      title: "Completed",
      items: [],
    },
  });

  //for retrieval
  const [stages, setStages] = useState("");

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getStages());
  }, [dispatch]);
  const { stage } = useSelector((state) => state.stage);

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const items = stage;
    const [recordedItem] = items.splice(result.source.index, 1);
    recordedItem.status = result.destination.droppableId;
    items.splice(result.destination.index, 0, recordedItem);
    setStages(items);
    setStages({ status: result.destination.droppableId });
    console.log(stage, "STAGE");
    console.log("STATE");
  };

  return (
    <GridWrapper>
      <div className="PApp">
        <DragDropContext onDragEnd={handleDragEnd}>
          {_.map(state, (data, key) => {
            return (
              <div key={key} className={"column"}>
                {console.log(key, "KEY")}
                <ProjectWrapper className="border">
                  <h3 className="title">{data.title}</h3>
                </ProjectWrapper>
                <Droppable droppableId={key}>
                  {(provided, snapshot) => {
                    return (
                      <div>
                        <div
                          ref={provided.innerRef}
                          {...provided.droppableProps}
                          className={"droppable-col"}
                        >
                          <hr className="line" style={{ opacity: 10 }}></hr>

                          {stage.map((stages, index) => {
                            console.log("map");
                            if (stages.status === key)
                              return (
                                <Draggable
                                  key={stages._id}
                                  index={index}
                                  draggableId={stages._id}
                                  className="drag"
                                >
                                  {(provided, snapshot) => {
                                    console.log(snapshot);
                                    return (
                                      <div
                                        className={`item ${
                                          snapshot.isDragging && "dragging"
                                        }`}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                      >
                                        {/* card name */}

                                        <button
                                          className="stageDetails"
                                          style={{
                                            padding: "0",
                                            border: "none",
                                            background: "none",
                                          }}
                                          onClick={() => {
                                            setFormData(stages);
                                            dispatch(
                                              getSpecificStages(stages._id)
                                            );
                                            //handleShow();
                                            stageclickPopup(true);
                                          }}
                                        >
                                          {stages.stageName}
                                        </button>
                                        <button
                                          className="btn-delete"
                                          onClick={() => {
                                            deleteS(stages._id);
                                            handleClose();
                                          }}
                                        >
                                          <DeleteOutlinedIcon className="delete" />
                                        </button>
                                      </div>
                                    );
                                  }}
                                </Draggable>
                              );
                          })}
                          {provided.placeholder}
                        </div>
                      </div>
                    );
                  }}
                </Droppable>
              </div>
            );
          })}
        </DragDropContext>
      </div>
    </GridWrapper>
  );
}

export default ProjectsDashboard;

标签： javascriptreactjsmernreact-dndreact-beautiful-dnd