如何解决如何从 mongoDB 检索数据并显示在可拖放的待办事项列表中?
我已经为可拖放的待办事项列表实现了代码。
const item = {
id: v4(),name: "Clean the house"
}
在上面的代码中,我需要存储在 mongoDB 中的 stageName 来代替“name”。我已经实施了 redux 检索代码,我只需要知道如何在每次从数据库循环时创建一个新的常量变量。可拖放待办事项列表的完整代码如下:
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 举报,一经查实,本站将立刻删除。