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

Question

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

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

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

问题在于两件事。

1. “DragDropContext”标签是映射出“填充挂钩”状态下存储数据之前的第一个标签。但相反，我首先使用 DragDropContext 作为子节点来映射数据。

这是正确的方法：

<DragDropContext onDragEnd={handleOnDragEnd}>

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

不是这个：

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

<DragDropContext onDragEnd={handleOnDragEnd}>

1. 然后第二个问题是最初在问题部分没有提出的看不见的问题，即 Droppaple 和可拖动的 id。始终确保这些标签的 id 是字符串，而不是数字，并确保 id 不相似，例如我的代码中的问题，“待办事项”、“进度”和“完成”中可拖动卡片的 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.

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