如何从 mongoDB 添加和检索值以响应拖放

问题描述

我是学习 MERN 堆栈的初学者。我使用 react-beautiful-dnd 开发了一个简单的待办事项应用程序。但是，我不确定如何将数据从 mongoDB 检索到特定的待办事项列表列，例如 "todo" 、 'inprogress" 和 completed 列。

我应该如何将数据从 mongoDB 检索到特定的 droppable 列？我熟悉检索数据，但不知道如何检索到特定列。另外，在向mongoDB中添加数据时，以这种方式检索数据是否需要满足任何规范？

import React,{useState} from 'react';
import './App.css';
import {DragDropContext,Droppable,Draggable} from "react-beautiful-dnd";
import _ from "lodash";
import {v4} from "uuid";

const item = {
  id: v4(),name: "Clean the house"
}

const item2 = {
  id: v4(),name: "Wash the car"
}

function App() {
  const [text,setText] = useState("")
  const [state,setState] = useState({
    //creating 3 columns
    "todo": {
      title: "Todo",items: [item,item2]//temporary data valuesa
    },"in-progress": {
      title: "In Progress",items: []
    },"done": {
      title: "Completed",items: []
    }
  })

  const handleDragEnd = ({destination,source}) => {
    if (!destination) {
      return
    }

    if (destination.index === source.index && destination.droppableId === source.droppableId) {
      return
    }

    // Creating a copy of item before removing it from state
    const itemcopy = {...state[source.droppableId].items[source.index]}

    setState(prev => {
      prev = {...prev}
      // Remove from prevIoUs items array
      prev[source.droppableId].items.splice(source.index,1)


      // Adding to new items array location
      prev[destination.droppableId].items.splice(destination.index,itemcopy)

      return prev
    })
  }

  const addItem = () => {
    setState(prev => {
      return {
        ...prev,todo: {
          title: "Todo",items: [
            {
              id: v4(),name: text
            },...prev.todo.items
          ]
        }
      }
    })

    setText("")
  }
  //the dragdropcontext is the wrapper for draging elements
  //dropable is the certain area inside the column where u can drop items
  //dragble are the items in the column to be dragged



  //here {_.map(state,(data,key) => { 
    //the above function is used to return the data and key of all 3 elements mentioned under use state() above
    //the key: returns todo,inprogress,and done
    //where as the data returns all the values of the variables within each key
  return (
    <div className="App">
      <div>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)}/>
        <button onClick={addItem}>Add</button>
      </div>
      <DragDropContext onDragEnd={handleDragEnd}>
   
        {_.map(state,key) => {
          return(
            <div key={key} className={"column"}>
              <h3>{data.title}</h3>
              <Droppable droppableId={key}>
                {(provided,snapshot) => {
                  return(
                    <div
                      ref={provided.innerRef}
                      {...provided.droppableProps}
                      key = {"Todo"}
                      className={"droppable-col"}
                    >
                      {data.items.map((el,index) => {
                        return(
                          <Draggable key={el.id} index={index} draggableId={el.id}>
                            {(provided,snapshot) => {
                              console.log(snapshot)
                              return(
                                <div
                                  className={`item ${snapshot.isDragging && "dragging"}`}
                                  ref={provided.innerRef}
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                >
                                  {el.name}
                                </div>
                              )
                            }}
                          </Draggable>
                        )
                      })}
                      {provided.placeholder}
                    </div>
                  )
                }}
              </Droppable>
            </div>
          )
        })}
      </DragDropContext>
    </div>
  );
}

export default App;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）