reactjs - react-beautiful-dnd 第二次下单时报错

Question

我有 bean 遵循 egghead.io 的 react-beautiful-dnd 官方教程。在第 5 课中，坚持重新排序我的实现总是抛出一个错误，但只有当我第二次尝试重新排序顶部项目时。当我第一次重新订购时它工作正常。

这是我专门针对这个问题的分支：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 中有一个错字错误

我的第二个任务有 idtaks-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.