Question

我有一个遵循egghead.io的react-beautiful-dnd官方教程的bean。在第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引发错误

1 个答案: