不变量失败:没有可丢弃的引用就无法收集

Question

我正在尝试实现react-beautiful-dnd。他们有一个我遵循的视频指南，并多次仔细检查和比较我的代码与视频中的代码，但我一直收到这个错误。

我会在这里发布我的代码，但我也在这里设置了一个沙箱：

https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&隐藏导航=1&主题=深色

我正在尝试设置react-beautiful-dnd的一个简单实现。我有4个文件。索引、列和单个项目(在我的代码中称为任务，因为这是一个待办事项应用程序(：

索引：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "@atlaskit/css-reset";
import { DragDropContext } from "react-beautiful-dnd";
import initialData from "./initial-data";
import Column from "./column";
class App extends Component {
state = initialData;
onDragEnd = result => {
console.log("drag ended");
// TODO reorder our column
};
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"));

第jsx:列

import React, { Component } 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;
`;
const Title = styled.h3`
padding: 8px;
`;
const TaskList = styled.div`
padding: 8px;
`;
export default class Column extends Component {
render() {
return (
<Container>
<Title>{this.props.column.title}</Title>
<Droppable droppableId={this.props.column.id}>
{provided => (
<TaskList
innerRef={provided.innerRef}
{...provided.droppableProps}
>
{this.props.tasks.map((task, index) => (
<Task key={task.id} task={task} index={index} />
))}
{provided.placeholder}
</TaskList>
)}
</Droppable>
</Container>
);
}
}

任务.jsx:

import React, { Component } 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;
`;
export default class Task extends Component {
render() {
return (
<Draggable draggableId={this.props.task.id} index={this.props.index}>
{provided => (
<Container
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
>
{this.props.task.content}
</Container>
)}
</Draggable>
);
}
}

初始数据：

const initialData = {
tasks: {
"task-1": { id: "task-1", content: "Take out the garbage" },
"task-2": { id: "task-2", content: "Watch my favorte 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"]
}
},
columnOrder: ["column-1"]
};
export default initialData;

我认为这与innerRef有关，但无法理解这是什么，我正在做不同的

Answer 1

将innerRef切换为简单的ref为我解决了这个问题。

为了清楚起见，修改后的代码应该是：

ref=｛provided.innerRef｝

通过github社区