第二次订购时 react-beautiful-dnd 抛出错误

Question

我一直在关注 egghead.io 的 react-beautiful-dnd 官方教程。在第 5 课 persisting the reordering 中，我的实现始终抛出错误，但只有在我尝试重新排序最上面的项目时才会抛出第二次错误。我第一次重新订购时它工作正常。

这是我针对这个问题的分支：https://github.com/bogdan-marian/my-react-beautiful-dnd/tree/002-property-id-question

第二次下单时出现的错误是：

TypeError: Cannot read property 'id' of undefined
src/Column.js:31 

# and row 31 shows
<Task key={task.id} task={task} index={index} />)}

我无法发现我的实施有什么问题。

Answer 1

我发现了问题。我的 initialData.js

中有一个拼写错误

我的第二个任务的 ID taks-2 而不是 task-2。另一方面，列设置为指向 task-2。这是修复前初始数据的样子

const initialData = {
tasks: {
    'task-1': {id: 'task-1', content: 'Take out the garbage'},
    'task-2': {id: 'taks-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']
    }
},

// Facilitate reordering of the columns
columnOrder:['column-1']

}

我所要做的就是将我的第二个任务 ID 更新为 task-2。

第二次订购时 react-beautiful-dnd 抛出错误

react-beautiful-dnd throws error when ordering the second time

reactjs

react-beautiful-dnd