React-Beautiful-dnd 元素在 2,3 次尝试后不可拖动

Posted 2023-02-21

【中文标题】React-Beautiful-dnd 元素在 2,3 次尝试后不可拖动

【英文标题】：React-Beautiful-dnd element not draggable after 2,3 tries

【发布时间】：2020-09-27 12:01:04

【问题描述】：

最初，元素可以从一列拖动到另一列，但在 2-3 个项目拖动后，某些索引上的项目停止拖动，就像我将一个项目从第 1 列索引 0 拖动到第 2 列索引0，但经过 1-2 次尝试后，索引 0 的项目停止移动，它停止拖动，而不同索引的项目移动。不明白是什么原因，附上代码。

    import React,  Component  from "react";
import  Card, Badge  from "react-bootstrap";
import "./projects.scss";
import projectInfo1 from "../../jsonData/projects1";
import  IconContext  from "react-icons";
import  FiPlus  from "react-icons/fi";
import  Droppable, DragDropContext, Draggable  from "react-beautiful-dnd";

class Projects extends Component 
  state = projectInfo1;
  constructor(props) 
    super(props);
    this.onDragEnd = this.onDragEnd.bind(this);
  
  onDragEnd = (result) => 
    const  destination, source, draggableId  = result;
    if (!destination) 
      return;
    
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) 
      return;
    
    const start = this.state.projects[source.droppableId];
    const finish = this.state.projects[destination.droppableId];

    if (start === finish) 
      const newTopicIds = Array.from(start.topicIds);
      newTopicIds.splice(source.index, 1);
      newTopicIds.splice(destination.index, 0, draggableId);

      const newProject = 
        ...start,
        topicIds: newTopicIds,
      ;

      const newState = 
        ...this.state,
        projects: 
          ...this.state.projects,
          [newProject.id]: newProject
        
      

      this.setState(newState);
      return
    

    //moving from one list to another 

    const startTopicIds = Array.from(start.topicIds);
    startTopicIds.splice(source.index, 1);
    const newStart = 
      ...start,
      topicIds: startTopicIds,
    ;

    const finishTopicIds = Array.from(finish.topicIds);
    finishTopicIds.splice(destination.index, 0, draggableId);
    const newFinish = 
      ...finish,
      topicIds: finishTopicIds,
    ;

    const newState = 
      ...this.state,
      projects: 
        ...this.state.projects,
        [newStart.id]: newStart,
        [newFinish.id]: newFinish,
      ,
    ;
    this.setState(newState);
  ;

  render() 
    return (
      <DragDropContext onDragEnd=this.onDragEnd>
        <div className="projectCards">
          this.state.projectsOrder.map((projectID) => 
            const project = this.state.projects[projectID];
            return (
              <Card
                className="projectCard"
                bg="light"
                style= width: "21rem" 
                key=project.id
              >
                <Card.Header color="#366FF0" className="projectcardheader">
                  project.projectName
                </Card.Header>
                <Droppable droppableId=project.id>
                  (provided) => (
                    <div
                      className="cardcontent"
                      ref=provided.innerRef
                      ...provided.droppableProps
                    >
                      project.topicIds.map((topicid, index) => 
                        const topic = this.state.topics[topicid];
                        return (
                          <Draggable draggableId=topic.id index=index>
                            (provided) => (
                              <Card
                                key=topic.id
                                className="topicscard"
                                ...provided.draggableProps
                                ...provided.dragHandleProps
                                ref=provided.innerRef
                              >
                                <Card.Title className="topicsheading">
                                  topic.topicName
                                </Card.Title>
                                <Card.Text className="topicdescription">
                                  topic.topicDescription
                                </Card.Text>
                                <div>
                                  topic.topicTags ? (
                                    topic.topicTags.map((k) => 
                                      return (
                                        <Badge
                                          variant="primary"
                                          className="tags"
                                        >
                                          k
                                        </Badge>
                                      );
                                    )
                                  ) : (
                                    <Badge variant="primary"></Badge>
                                  )
                                </div>
                              </Card>
                            )
                          </Draggable>
                        );
                      )
                      provided.placeholder
                    </div>
                  )
                </Droppable>
                <div className="addnewcard">
                  <IconContext.Provider
                    value=
                      style:  verticalAlign: "middle" ,
                      className: "reacticon",
                    
                  >
                    <FiPlus />
                  </IconContext.Provider>" "
                  Add another discussion
                </div>
              </Card>
            );
          )
        </div>
      </DragDropContext>
    );
  

export default Projects;

初始数据：

const projectsInfo1 = 
  topics: 
    "topic-1": 
      id: "topic-1",
      topicName: "Adding a feature: GSoC 1",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-2": 
      id: "topic-2",
      topicName: "Adding a feature: GSoC 2",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-3": 
      id: "topic-3",
      topicName: "Adding a feature: GSoC 3",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-4": 
      id: "topic-4",
      topicName: "Adding a feature: GSoC 4",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-5": 
      id: "topic-5",
      topicName: "Adding a feature: GSoC 5",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-6": 
      id: "topic-6",
      topicName: "Adding a feature: GSoC 6",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-7": 
      id: "topic-7",
      topicName: "Adding a feature: GSoC 7",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-8": 
      id: "topic-8",
      topicName: "Adding a feature: GSoC 8",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-9": 
      id: "topic-9",
      topicName: "Adding a feature: GSoC 9",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
    "topic-10": 
      id: "topic-10",
      topicName: "Adding a feature: GSoC 10",
      topicDescription:
        "Some quick example text to build on the card title and make up the bulk of the card's content.",
      topicTags: ["ReactJs", "NodeJS"],
    ,
  ,
  projectsOrder: [
    "Project-2",
    "Project-1",
    "Project-5",
    "Project-4",
    "Project-3",
  ],
  projects: 
    "Project-1": 
      projectName: "Project 1",
      id: "Project-1",
      topicIds: ["topic-1", "topic-2"],
    ,
    "Project-2": 
      projectName: "Project 2",
      id: "Project-2",
      topicIds: ["topic-3", "topic-4"],
    ,
    "Project-3": 
      projectName: "Project 3",
      id: "Project-3",
      topicIds: ["topic-5", "topic-6"],
    ,
    "Project-4": 
      projectName: "Project 4",
      topicIds: ["topic-7", "topic-8"],
      id: "Project-4",
    ,
    "Project-5": 
      projectName: "Project   5",
      id: "Project-5",
      topicIds: ["topic-9", "topic-10"],
    ,
  ,
;

export default projectsInfo1;

【参考方案1】：

不知道你是否还有这个问题，但我遇到了同样的问题，这已经为我解决了。

您的Draggable 需要有一个唯一的密钥。 即

发件人：

...
return (
   <Draggable draggableId=topic.id index=index>
      (provided) => (
         <Card
...

收件人：

...
return (
   <Draggable draggableId=topic.id index=index key=topic.id>
      (provided) => (
         <Card
...

或多或少。

【讨论】：

嘿，感谢好友查看。我会尽力让你知道！

我被同样的问题难住了，这解决了它。

这个答案对我也有帮助。我的拖放操作在一段时间内工作得很好，直到突然间就不行了。当我将密钥从 key=i 更改为 key = row_$i 时，它又开始工作了。

你救了我的命，伙计！！！非常感谢！