反应-漂亮-dnd onDragEnd不工作在第一次拖动

Question

我正在使用react-beautiful-dnd创建一个项目管理板，我跟踪视频教程中的所有内容。

一开始，看上去还不错。但我注意到，当我拖着一件物品放下它，它就不再是可拖的了。

这是我到目前为止得到的。

App.js

<div>
    <Kanban />
</div>

initialData.js

const initialData = {
tasks: {
    'task-1': { id: 'task-1', content: 'Take out the garbag'},
    'task-2': { id: 'task-2', content: 'Watch my favorite show'},
    'task-3': { id: 'task-3', content: 'Charge my phone'},
    'task-4': { id: 'task-4', content: 'Cook dinner'},
},
columns: {
    'column-1': {
        id: 'column-1',
        title: 'To do',
        taskIds: ['task-1', 'task-2', 'task-3', 'task-4']
    },
    'column-2': {
        id: 'column-2',
        title: 'In progress',
        taskIds: []
    },
    'column-3': {
        id: 'column-3',
        title: 'Done',
        taskIds: []
    },
},
// Facilitate reordering of the columns
columnOrder: ['column-1', 'column-2', 'column-3']
};

export default initialData;

Kanban.js

enter code hereimport React, { memo, useState } from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import '@atlaskit/css-reset';
import initialData from '../helpers/initialData';
import Column from './Column';

function Kanban() {
    const [state, setState] = useState(initialData);
    
    const onDragEnd = result => {
        const { destination, source, draggableId } = result;

        console.log('rsu ', result);

        if (!destination)  return;

        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) return;

        const column = state.columns[source.droppableId];
        const newTaskIds = Array.from(column.taskIds);
        newTaskIds.splice(source.index, 1);
        newTaskIds.splice(destination.index, 0, draggableId);
        
        const newColumn = {
            ...column,
            taskIds: newTaskIds
        };
        const newState = {
            ...state,
            columns: {
                ...state.columns,
                [newColumn.id]: newColumn,
            },
        };

        console.log(newState);

        setState(newState);
    }

    return (
        <>
            <DragDropContext
                onDragEnd={onDragEnd}
            >
                {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} />
                })}
            </DragDropContext>
        </>
    )
}

export default memo(Kanban);

Column.js

import React, { memo } from 'react';
import styled from 'styled-components';
import Task from './Task';
import { Droppable } from 'react-beautiful-dnd';

const Container = styled.div`
    margin: 8px;
    border: 1px solid lightgrey;
    border-radius: 2px;
`;
const Title = styled.h3`
    padding: 8px;
`;
const TaskList = styled.div`
    padding: 8px;
`;

function Column({ column, tasks }) { 
    return (
        <Container>
            <Title>{column.title}</Title>
            
            <Droppable 
                key={`${column.id}-droppable`}
                droppableId={column.id} 
            >
                {(provided, snapshot) => (
                    <TaskList
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                        
                    >
                        {tasks.map((task, index) => (
                            <Task key={task.id} task={task} index={index} />
                        ))}
                        {provided.placeholder}
                    </TaskList>
                )}
            </Droppable>

        </Container>
    )

}

export default memo(Column);

Task.js

import React, { memo } from 'react';
import styled from 'styled-components';
import { Draggable } from 'react-beautiful-dnd';

const Container = styled.div`
    border: 1px solid lightgrey;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 2px;
    background-color: ${props => (props.isDragging ? 'lightgreen' : 'white')};
`;

function Task({ task, index }) {
    return (    
        <Draggable
            draggableId={task.id}
            index={index}           
            key={`${task.id}-draggable`} 
        >
            {(provided, snapshot) => (
                <Container
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    isDragging={snapshot.isDragging}
                >
                    { task.content }
                </Container>
            )}
        </Draggable>
    )
}

export default memo(Task);

我注意到onDragEnd不会在第一次拖动时开火，也许这就是导致问题的原因。

我甚至把innerRef={provided.innerRef}改成了ref={provided.innerRef}。

有谁可以帮我？这个问题已经困扰了将近一天了。谢谢

Answer 1

我对DND的反应也是新的，不能百分之百肯定，所以这里有几个可能的选择可以尝试：(抱歉，我不得不补充一下，我还没有这个声誉可以评论)

您可以尝试将onDragEnd设置为函数而不是常量，这可能会有所帮助。在我的应用程序中，我设置为一个函数，这样它就不会在页面加载时呈现。

您也可以删除这一部分代码(尽管它不会解决您的问题)：如果您将状态重置为原始的列表顺序，那么它将什么也不会做。

if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) return;

我怀疑列数组是导致问题的真正原因。如果您从这段代码中控制“列”，那么它是否按顺序给出了当前列的数组？我怀疑这可能只是为了成为column = state.columns？

const column = state.columns[source.droppableId];
        const newTaskIds = Array.from(column.taskIds);

这是我的美化dnd列表中的代码，如果有帮助的话：

function handleOnDragEnd(result) {
        if (!result.destination) return;
        const items = Array.from(widgets);
        const [reorderedItem] = items.splice(result.source.index, 1);
        items.splice(result.destination.index, 0, reorderedItem);
        setWidgets(items);
        //widgetCallback(items,_id);
    };


return(
<div>
<DragDropContext onDragEnd={handleOnDragEnd}>
                            <Droppable droppableId={page.pageTag}>
                                {(provided) => (
                                    <div className={classes.cardBoard} {...provided.droppableProps} ref={provided.innerRef}>
                                        {(widgets == undefined || widgets == [] || (pageZoomFactor<0.5 && !pageExpanded)) ? <div/> : widgets.map((widget, index) => {
                                            widget = Object.assign(widget, {cardExpanded: pageExpanded})
                                            return (
                                                <Draggable 
                                                    key={widget._id} 
                                                    draggableId={widget._id == undefined ? "fakeID" : widget._id} 
                                                    index={index} 
                                                    className={classes.widget} 
                                                >
                                                    {(provided) => (
                                                        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                                            <Widget widgetProp={widget} pageID={_id} index={index} changeWidgetCallback={handleChangeWidgetCallback} pageZoomFactor={pageZoomFactor}/>
                                                        </div>
                                                    )}
                                                </Draggable>
                                            );
                                        })}
                                        {provided.placeholder}
                                    </div>
                                )}
                            </Droppable>
                        </DragDropContext>
</div>