Reactjs 我怎样才能从dnd处获得组合来处理我的项目？

我使用的是react beautiful dnd，已经创建了3列列表项。我想添加功能以合并项目。我已经阅读了文档，但似乎仍然不明白为什么它不起作用

问题似乎出现在onDragEnd中，在那里它可以像文档中一样找到result.combine（combine），但是当它到达if语句时，它似乎不是真的。我是不是忽略了什么？有人能给我解释一下发生了什么，为什么它不起作用

提前谢谢你

我使用过的资源：

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'task-1' },
    'task-2': { id: 'task-2', content: 'task-2' },
    'task-3': { id: 'task-3', content: 'task-3' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'column-1',
      taskIds: ['task-1', 'task-2'],
    },
    'column-2': {
      id: 'column-2',
      title: 'column-2',
      taskIds: [],
    },
    'column-3': {
      id: 'column-3',
      title: 'column-3',
      taskIds: ['task-3'],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

export default initialData;

• （但在组合方面没有任何内容！）

我的数据：

const initialData = {
  tasks: {
    'task-1': { id: 'task-1', content: 'task-1' },
    'task-2': { id: 'task-2', content: 'task-2' },
    'task-3': { id: 'task-3', content: 'task-3' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'column-1',
      taskIds: ['task-1', 'task-2'],
    },
    'column-2': {
      id: 'column-2',
      title: 'column-2',
      taskIds: [],
    },
    'column-3': {
      id: 'column-3',
      title: 'column-3',
      taskIds: ['task-3'],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

export default initialData;

使用onDragEnd索引文件

const onDragEnd = result => {
    const { destination, source, draggableId, combine } = result;

    //console.log(`drag: ${combine.draggableId} drop: ${combine.droppableId}`);

    if (!destination) {
      return; // not dropped in a known destination
    }
    if (destination.draggableId === source.droppableId && destination.index === source.index) {
      return; // dropped in same location
    }

    const start = state.columns[source.droppableId]; //get selected column
    const finish = state.columns[destination.droppableId]; //get new selected column

    if (combine) { 

      //console.log(`drag: ${combine.draggableId} drop: ${combine.droppableId}`); 

      const combineTaskIds = Array.from(start.taskIds); 
      combineTaskIds.splice(source.index, 1); 
      const newColumn = {
        ...start,
        taskIds: combineTaskIds,
      }; 

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start === finish) { //move in same column
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1); 
      newTaskIds.splice(destination.index, 0, draggableId); 

      const newColumn = {
        ...start,
        taskIds: newTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start !== finish) { 
      const startTaskIds = Array.from(start.taskIds);
      startTaskIds.splice(source.index, 1); 
      const newStart = {
        ...start,
        taskIds: startTaskIds,
      };

      const finishTaskIds = Array.from(finish.taskIds);
      finishTaskIds.splice(destination.index, 0, draggableId); 
      const newFinish = {
        ...finish,
        taskIds: finishTaskIds,
      };

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newStart.id]: newStart, [newFinish.id]: newFinish } }));
    }
  }

return <DragDropContext onDragEnd={onDragEnd} >
    <Container>
      {
        state.columnOrder.map(columnId => {
          const column = state.columns[columnId];
          const tasks = column.taskIds.map(taskId => state.tasks[taskId]);

          return <Column key={column.id} column={column} tasks={tasks} />;
        })
      }
    </Container>
  </DragDropContext >

const onDragEnd=result=>{
const{destination，source，draggableId，combine}=result；
//log（`drag:${combine.draggableId}drop:${combine.droppableId}`）；
如果（！目的地）{
return；//未在已知目标中删除
}
if（destination.draggableId==source.droppableId&&destination.index==source.index）{
return；//已在同一位置删除
}
const start=state.columns[source.droppableId]；//获取所选列
const finish=state.columns[destination.droppableId]；//获取新的选定列
如果（合并）{
//log（`drag:${combine.draggableId}drop:${combine.droppableId}`）；
const combineTaskIds=Array.from（start.taskIds）；
组合橇。拼接（源。索引，1）；
常量newColumn={
开始
taskIds:combineTaskIds，
}; 
setState（prevState=>（{…prevState，列：{…prevState.columns[newColumn.id]：newColumn}}））；
}
如果（start==finish）{//在同一列中移动
const newTaskIds=Array.from（start.taskIds）；
newTaskIds.拼接（source.index，1）；
newTaskIds.splice（destination.index，0，draggableId）；
常量newColumn={
开始
taskIds:newTaskIds，
}；//使用新任务创建新列
setState（prevState=>（{…prevState，列：{…prevState.columns[newColumn.id]：newColumn}}））；
}
如果（开始！==完成）{
const startTaskIds=Array.from（start.taskIds）；
startTaskIds.拼接（源索引，1）；
const newStart={
开始
taskIds:startTaskIds，
};
const finishTaskIds=Array.from（finish.taskIds）；
finishTaskIds.splice（destination.index，0，draggableId）；
常数newFinish={
…完成，
taskIds:finishTaskIds，
};
setState（prevState=>（{…prevState，列：{…prevState.columns，[newStart.id]：newStart，[newFinish.id]：newFinish}））；
}
}
返回
{
state.columnOrder.map（columnId=>{
const column=state.columns[columnId]；
const tasks=column.taskIds.map（taskId=>state.tasks[taskId]）；
返回；
})
}

可拖放列（IsCombineeEnabled为true）

{（已提供，快照）=>(
{props.tasks.map（（任务，索引）=>）}
{提供的.占位符}
)}

可拖动的任务项

<Draggable draggableId={props.task.id} index={props.index}>
      {(provided, snapshot) => (
        <Container
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          innerRef={provided.innerRef}
          isDragging={snapshot.isDragging}
        >
          {props.task.content}
        </Container>
      )}
    </Draggable>

{（已提供，快照）=>(
{props.task.content}
)}

最后，我解决了这个问题，并希望与大家分享，以防有人最终会遇到同样的问题

在进入联合收割机的条件之前，问题确实在onDragEnd

const finish

需要根据使用情况进行更改，因为它将有一个或另一个。联合收割机或目的地

    const onDragEnd = result => {
    const { destination, source, draggableId, combine } = result;

  if (!combine && !destination) {
      return; // not dropped in a known destination
    }
    if (!combine && destination.draggableId === source.droppableId && destination.index === source.index) {
      return; // dropped in same location
    }

    const start = state.columns[source.droppableId]; //get selected column
    const finish = combine ? state.columns[combine.droppableId] : state.columns[destination.droppableId]; //get new selected column

    if (combine) {
      //just removing the dragging item
      const combineTaskIds = Array.from(start.taskIds); //create new array with current columns taskids 
      combineTaskIds.splice(source.index, 1); // from this index we want to remove 1 item
      const newColumn = {
        ...start,
        taskIds: combineTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start === finish) { //move in same column
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index, 1); // from this index we want to remove 1 item
      newTaskIds.splice(destination.index, 0, draggableId); // from this index we want to add the draggable item

      const newColumn = {
        ...start,
        taskIds: newTaskIds,
      }; // create new column with new tasks

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newColumn.id]: newColumn } }));
    }

    if (start !== finish) { //move to different column
      const startTaskIds = Array.from(start.taskIds);
      startTaskIds.splice(source.index, 1); //remove item from index
      const newStart = {
        ...start,
        taskIds: startTaskIds,
      };

      const finishTaskIds = Array.from(finish.taskIds);
      finishTaskIds.splice(destination.index, 0, draggableId); // add draggable to index
      const newFinish = {
        ...finish,
        taskIds: finishTaskIds,
      };

      setState(prevState => ({ ...prevState, columns: { ...prevState.columns, [newStart.id]: newStart, [newFinish.id]: newFinish } }));
    }
  }

欢迎对我的答案进行任何补充或更正