react-beautiful-dnd：目的地等于空

Question

事情是这样的。我正在通过构建一个待办事项应用程序来学习 React 美丽的 dnd。我已经设置了应用程序，包括样式化组件和编写显示待办事项卡片的逻辑。

问题是这样的，当我将待办事项中的卡片拖到进度或完成时，属性“目的地”，在控制台中记录的对象中（检查代码以查看它的记录位置）目的地等于空。它应该等于一个对象。好像是什么问题。

The full code is located in the link below:

https://codesandbox.io/s/async-fast-hziot?file=/src/App.js

预览：

import "./styles.css";
import { useState } from "react";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';




export default function App() {

  const [populateStore, setPopulateStore] = useState(
    {
      todo: {
      _id:"todo",
      data: [
        {
          _id: 'ms7690fvs6sd53h328sof-0sdf',
          author: 'anonymous',
          title: 'Going to the pack',
          date: '11th, January 2022'
        },
        {
          _id: 'sdfdf32gf98tddswjk73i2r',
          author: 'anonymous',
          title: 'Visit my parents for the holiday',
          date: '11th, January 2022'
        }
      ]},
      inprogress: { 
        _id: "in progress",
        data:[]},
      done: {
        _id:"done",
        data: []
      }
    }
  );






  function handleOnDragEnd(result) {
    console.log(result, "result")
  }

  return (
                    <div className="populate-container">

                      {Object.entries(populateStore).map(([title, array],index) => {

                        return (
                          <div className="todo-container" key={index}>
                            <div className="todo-headings">
                              {title}
                            </div>

                       
                              <DragDropContext onDragEnd={handleOnDragEnd}>
                              <Droppable 
                                droppableId={`${array._id}`}
                                type={`${array._id}`}
                                >
                                {
                                  (provided) => {
                                    
                                    return (
                                      <div className="_droppable" {...provided.droppableProps} ref={provided.innerRef}>
                                        {
                                          array.data.map((item, id) => {

                                            return (
                                              <Draggable key={id} draggableId={`${id}`} index={id}>
                                                {
                                                  (provided) => {
                                                      
                                                    return (
                                                      <div className="card" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} key={id}>
      
                                                        <div className="card-description">
                                                          <h5>{item.title}</h5>
                                                          <p>
                                                            {
                                                              item.date
                                                            }
                                                          </p>
                                                        </div>
      
                                                      </div>
      
                                                    )
                                                  }
                                                }
                                              </Draggable>
                                            )
                                          })
                                        }
                                        {provided.placeholder}
                                      </div>
                                    )
                                  }
                                }
                              </Droppable>
                            </DragDropContext>
                            
                          </div>
                        )
                      })}

                     
                    </div>
  );
}

Answer 1

问题有两点。

标签“DragDropContext”是映射出状态“populate hook”中的存储数据之前的第一个标签。但是相反，我首先将数据映射为 DragDropContext 作为子节点。

这是正确的方法：

<DragDropContext onDragEnd={handleOnDragEnd}>

  {Object.entries(populateStore).map(([title, array],index) => { ......

不是这个：


{Object.entries(populateStore).map(([title, array],index) => { ......

<DragDropContext onDragEnd={handleOnDragEnd}>

然后第二个是最初在问题部分没有问到的看不见的问题，那就是 Droppaple 和 draggable 的 id。始终确保这些标签的 ID 是字符串，而不是数字，并确保 ID 不相同，例如我代码中的问题，“todo”、“progress”和“done”中可拖动卡片的 id列都是数字 1（我手动将一个对象添加到位于状态的“完成”数组中以对其进行测试，并且我在高阶函数中使用索引，“map”作为可拖动标签中的 id），所以每当我尝试拿起第一个时，在“待办事项”列中我最终会在“完成”列中携带第一个。所以我通过在对象中使用字符串 id 解决了这个问题。

我用过这个：

id: _id: "ms7690fvs6sd53h328sof-0sdf" in <Draggable key={id}

不再是这个了：

array.data.map((item, id) => {  in <Draggable key={id}

when id = 1 or 2 or 3 and so on.

您可以在问题部分提供的link中的javascript文件“answer_code.js”中查看解决方案。

react-beautiful-dnd：目的地等于空

react-beautiful-dnd: destination is equal to null

reactjs

react-beautiful-dnd