React-beautiful-dnd 返回目的地=null答案

【问题标题】：React-beautiful-dnd returning destination=nullReact-beautiful-dnd 返回目的地=null
【发布时间】：2020-11-26 10:25:08
【问题描述】：

我正在使用 react-beautiful-dnd，但每当我移动该项目时，它就会返回。我认为它返回是因为我收到 destination: null

我不知道为什么会这样。为什么我的目的地总是空的。

<DragDropContext onDragEnd={this.onDragEnd} onDragUpdate={this.onDragUpdate}>
                    <Droppable droppableId="droppable">
                      {(provided, snapshot) => (
                        <div {...provided.droppableProps} ref={provided.innerRef}>
                          {this.props.editor.pages.length > 0
                            ? this.props.editor.pages.map((page, index) => (
                                <PageDetail
                                  key={page.uuid}
                                  page={page}
                                  togglePageModal={this.props.actions.togglePageModal}
                                  currentPageId={this.props.currentPageId}
                                  toggleCreatePage={this.props.actions.toggleCreatePage}
                                  index={index}
                                />
                                // <FolderDetail key={page._id} folder={page} />
                              ))
                            : ''}
                          {provided.placeholder}
                        </div>
                      )}
                    </Droppable>
                  </DragDropContext>

在PageDetail组件中

    const { name, uuid, projectId } = this.props.page;
    const { page, index } = this.props;
    return (
      <Fragment>
        <Draggable key={page.index} draggableId={page.index} index={index}>
          {(provided, snapshot) => (
            <div>
              <div
                ref={provided.innerRef}
                {...provided.draggableProps}
                {...provided.dragHandleProps}
              >
                 {name}
              </div>
              {provided.placeholder}
            </div>
          )}
        </Draggable>
      </Fragment>
    );
  }

【问题讨论】：

标签： reactjs react-beautiful-dnd

【解决方案1】：

确保您的 Droppable 具有绝对唯一的 droppableId。我在使用多个 Droppable 区域时遇到了这个问题，但有些意外共享了 droppableIds。当使它们独一无二时，然后在拖动时呈现我的占位符，然后我的目标参数也按预期填充。

【讨论】：

我只用一个 id 映射了多个可放置区域。我使用了 map 函数中的动态 id，它可以工作

【解决方案2】：

我遇到了类似的问题（但仅在 Chrome 中）。我的组件被包裹在跨度中，并且目的地不断出现。

尝试在 div 中包装 PageDetail 并将 Fragment 更改为 div

【讨论】：