反应美丽的DND -我变得“找不到拖放id:任务-2。

Question

在下面的代码中，我有两列。一列包含所有任务。另一列有一组选定的任务。因此，我的期望是，当用户拖放任务从“总任务”列到“选定任务”列时，任务应该仍然存在于“总任务”列中。当任务位于“选定任务”列中时，将有一个按钮可用于从“选定任务”列中删除任务。单击此按钮后，任务将从“选定任务”列中移除。但我无法再次将其从“总任务”列中拖出。我得到了以下错误：

无法用id找到可拖放的任务-2

请你们看一看，告诉我我做错了什么

请查找代码框的链接：

https://codesandbox.io/s/unruffled-waterfall-wdyc5?file=/src/task.jsx

这也是我的代码：

App.jsx:

import React from 'react';
import '@atlaskit/css-reset';
import styled from 'styled-components';
import { DragDropContext } from 'react-beautiful-dnd';
import initialData from './initial-data';
import Column from './column';

const Container = styled.div`
  display: flex;
`;

class App extends React.Component {
    state = initialData;

  onDragStart = start => {
    const homeIndex = this.state.columnOrder.indexOf(start.source.droppableId);

    this.setState({
      homeIndex,
    });
  };

  onDragEnd = result => {
    this.setState({
      homeIndex: null,
    });

    const { destination, source, draggableId } = result;

    if (!destination) {
      return;
    }

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

    const home = this.state.columns[source.droppableId];
    const foreign = this.state.columns[destination.droppableId];

    if (home === foreign) {
      const newTaskIds = Array.from(home.taskIds);
      newTaskIds.splice(source.index, 1);
      newTaskIds.splice(destination.index, 0, draggableId);

      const newHome = {
        ...home,
        taskIds: newTaskIds,
      };

      const newState = {
        ...this.state,
        columns: {
          ...this.state.columns,
          [newHome.id]: newHome,
        },
      };

      this.setState(newState);
      return;
    }

    const foreignTaskIds = Array.from(foreign.taskIds);
    foreignTaskIds.splice(destination.index, 0, draggableId);
    const newForeign = {
      ...foreign,
      taskIds: foreignTaskIds,
    };

    const newState = {
      ...this.state,
      columns: {
        ...this.state.columns,
        [newForeign.id]: newForeign,
      },
    };
    this.setState(newState);
  };

  deleteHandler = (taskId) => {
        
        console.warn("I am going to delete: " + taskId);
        var columnId = 'column-2';
        
        const column = this.state.columns[columnId];
        const columnTaskIds = Array.from(column.taskIds);
        columnTaskIds.splice(columnTaskIds.indexOf(taskId), 1);
        const newcolumn = {
        ...column,
        taskIds: columnTaskIds,
        };
        var newState = null;
        newState = {
            ...this.state,
      columns: {
        ...this.state.columns,
              [newcolumn.id]: newcolumn
      }
        };
        this.setState(newState);
        console.log(newState);
    }

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

            const isDropDisabled = index < this.state.homeIndex;

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

export default App

column.jsx

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

const Container = styled.div`
  margin: 8px;
  border: 1px solid lightgrey;
  border-radius: 2px;
  width: 220px;

  display: flex;
  flex-direction: column;
`;
const Title = styled.h3`
  padding: 8px;
`;
const TaskList = styled.div`
  padding: 8px;
  transition: background-color 0.2s ease;
  background-color: ${props => (props.isDraggingOver ? 'skyblue' : 'white')};
  flex-grow: 1;
  min-height: 100px;
`;

export default class Column extends React.Component {
  isSelectedTasksColumn = this.props.column.id === 'column-2';
  render() {
    return (
      <Container>
        <Title>{this.props.column.title}</Title>
        <Droppable
          droppableId={this.props.column.id}
          isDropDisabled={this.props.isDropDisabled}
        >
          {(provided, snapshot) => (
            <TaskList
              ref={provided.innerRef}
              {...provided.droppableProps}
              isDraggingOver={snapshot.isDraggingOver}
            >
              {this.props.tasks.map((task, index) => (
                <Task key={task.id} task={task} index={index} isSelectedTasksColumn={this.isSelectedTasksColumn} deleteHandler={this.props.deleteHandler}/>
              ))}
              {provided.placeholder}
            </TaskList>
          )}
        </Droppable>
      </Container>
    );
  }
}

task.jsx

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: ${props =>
    props.isDragDisabled
      ? 'lightgrey'
      : props.isDragging
        ? 'lightgreen'
        : 'white'};
`;

const DeleteButton = styled.button`
    justify-self: center;
    align-self: center;
    border: 0;
    background-color: black;
    color: white;
    padding: 7px;
    cursor: pointer;
    display: ${props => props.isSelectedTasksColumn ? "inline" : "none"};
    float: right;
`;

const DisplayValue = styled.p`
    align-self: center;
    font-size: 20px;
    padding: 0;
    margin: 0;
    display: inline;
`;

export default class Task extends React.Component {
  render() {
    const isDragDisabled = false;
    return (
      <Draggable
        draggableId={this.props.task.id}
        index={this.props.index}
        isDragDisabled={isDragDisabled}
      >
        {(provided, snapshot) => (
          <Container
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            ref={provided.innerRef}
            isDragging={snapshot.isDragging}
            isDragDisabled={isDragDisabled}
          >
            <DisplayValue>{this.props.task.content}</DisplayValue>
            <DeleteButton isSelectedTasksColumn = {this.props.isSelectedTasksColumn}
              onClick={() => this.props.deleteHandler(this.props.task.id)}>
              &#x2716;
            </DeleteButton>
          </Container>
        )}
      </Draggable>
    );
  }
}

initial-data.js:

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' },
    'task-4': { id: 'task-4', content: 'Task 4' },
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'All tasks',
      taskIds: ['task-1', 'task-2', 'task-3', 'task-4'],
    },
    'column-2': {
      id: 'column-2',
      title: 'Selected tasks',
      taskIds: [],
    }
  },
  // Facilitate reordering of the columns
  columnOrder: ['column-1', 'column-2'],
};

export default initialData;

Answer 1

删除React.StrictMode可以帮助https://reactjs.org/docs/strict-mode.html