React-Beautiful-Dnd无法找到带有ID的可拖动元素

如何解决React-Beautiful-Dnd无法找到带有ID的可拖动元素

我正在尝试复制react-beautiful-dnd教程的第4步：重新排序列表。据我所知，我已经在本教程中复制了代码：https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd

但是，当我运行并尝试拖动列表项时，出现类似Unable to find draggable element with id: task-1

的错误

如果我查看DOM，我肯定可以看到具有该ID的元素：

我不知道自己在做什么错。我将id打印到控制台以检查它是否是字符串。有想法吗？

INITIAL-DATA.JS

const initialData = {

    tasks : {
        "task-1" : { id : "task-1",content : "Take out garbage"},"task-2" : { id : "task-2",content : "Watch show"},"task-3" : { id : "task-3",content : "Charge 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"]
        }
    },columnOrder : ["column-1"]
};

export default initialData;

INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import initialData from "./initial-data";
import Column from "./column";
import { DragDropContext } from 'react-beautiful-dnd';

class App extends React.Component {
    state = initialData;

    // Needs to synchronously update our state to reflect the drag-drop result
    // The only required DragDrop callback
    onDragEnd = result => {

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

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

                })
            }
            </DragDropContext>
        )
    }
}

ReactDOM.render(
  <App />,document.getElementById('root')
);

COLUMN.JS

import React 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;
    margin: 0px;
`;
const TaskList = styled.div`
    padding: 8px;
`;

export default class Column extends React.Component {
    render() {
        return (
            // Note: Droppables expect their child to be a function that returns a react component
            <Container>
                <Title>{this.props.column.title}</Title>
                <Droppable droppableId={this.props.column.id}> 
                { provided => (
                    // The droppableProps in the provided object (a react-beautiful-dnd object) need to get provided to the object
                    // you want to designate as your droppable
                    // {provided.placeholder} // Needs to be added as a child of the component you designate as the droppable
                    // ref is an attribute of -components. Returns the dom node of the component
                    <TaskList 
                        ref={provided.innerRef}
                        {...provided.droppableProps}
                    >
                        { this.props.tasks.map( (task,index) => <Task key={task.id} task={task} index={index} /> ) }
                        {provided.placeholder}
                    </TaskList>
                )}
                </Droppable>
            </Container>
        )
    }
}

TASK.JS

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

const Container = styled.div`
    border: 1px solid lightgrey;
    border-radius: 2px;
    padding: 8px;
    margin-bottom: 8px;
    background-color: white; /* so don't see through when dragging */
`;

export default class Task extends React.Component {
    render() {
        console.log(this.props.task.id)
        console.log(typeof this.props.task.id)
        return (
            // Required draggable props are draggableId and index
            // Note: Draggables expect their child to be a function that returns a react component
            <Draggable draggableId={this.props.task.id} index={this.props.index}>
                { provided => (
                    // The draggbleProps in the provided object (a react-beautiful-dnd object) need to get provided to the object
                    // you want to designate as your draggable
                    // DragHandleProps needs to get applied to the part of that object that you want to use to drag the whole object
                    // ref is an attribute of -components. Returns the dom node of the component
                    <Container
                        ref={provided.innerRef}
                        {...provided.draggbleProps}
                        {...provided.dragHandleProps}
                    >
                        { this.props.task.content }
                    </Container>
                )}
            </Draggable>
        )
    }
}

解决方法

您的代码中只有一个错字：在task.js中，将{...provided.draggbleProps}更改为{...provided.draggableProps}

,

如上所示，这里的问题是打字错误。根据您在该答案下方的评论，您可以在将来使用 Typescript 帮助避免这种情况。它会在您的编辑器中向您显示错字错误，并为您提供自动完成功能。