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

Question

我正在使用react-beautiful-dnd，但是每当我移动该项目时它都会返回。我认为它返回是因为我收到目的地：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>
    );
  }

Answer 1

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