反應類型錯誤：無法讀取未定義的屬性“type1”

Question

我正在研究 react-beautiful-dnd 示例，我想添加一個元素的條件排斥，但我收到一個錯誤，該字段無法讀取。 這個數據

const initialData = {
tasks: {
  'task-1': { id: 'task-1', content: 'Take out the garbage',type1: 'w' },
  'task-2': { id: 'task-2', content: 'Watch my favorite show',type1: 'a' },
  'task-3': { id: 'task-3', content: 'Charge my phone',type1: 'h' },
  'task-4': { id: 'task-4', content: 'Cook dinner',type1: 'w' }
},
columns: {
  'column-1': {
    id: 'column-1',
    title: 'To do',
    type2: 'all',
    taskIds: ['task-1', 'task-2', 'task-3', 'task-4']
  },
  'column-2': {
    id: 'column-2',
    title: 'In progress',
    type2: 'w',
    taskIds: []
  },
  'column-3': {
    id: 'column-3',
    title: 'Done',
    type2: 'a',
    taskIds: []
  }
},
// Facilitate reordering of the columns
columnOrder: ['column-1', 'column-2', 'column-3']  }export default initialData

所以他們是相連的

import initialData from './initial-data'

所以它在狀態中分配

state = initialData

這就是它的使用方式，我描述的一切都有效，這是示例中的代碼

const start = this.state.columns[source.droppableId]
const finish = this.state.columns[destination.droppableId]

if (start === finish) {
  const newTaskIds = Array.from(start.taskIds)

現在下面我想添加我的條件，它會引發錯誤

    const typeDrag = this.state.tasks[source.draggableId]
const typeDrop = this.state.columns[destination.droppableId]


if(typeDrag.type1!==typeDrop.type2)
{return}

我不明白為什么 start.taskIds 有效，但 typeDrag.type1 報告說沒有這樣的字段

類似的可執行代碼和框示例示例

Answer 1

解決方案：

而不是： const typeDrag = this.state.tasks[source.draggableId]
使用： const typeDrag = this.state.tasks[draggableId]

解釋：

在您的代碼source中沒有屬性draggableId 。
所以typeDrag是未定義的，因為source.draggableId是未定義的。

您的onDragEnd鈎子的參數如下所示：

{
  "draggableId": "task-2",
  "type": "TASK",
  "source": {
    "index": 1,
    "droppableId": "column-1"
  },
  "destination": {
    "droppableId": "column-2",
    "index": 0
  },
  "reason": "DROP"
}

通過檢查您的沙箱示例，我發現您已經從方法參數（“result”）中將draggableId屬性提取為常量：

const { destination, source, draggableId } = result; // line:28

因此，使用draggableId而不是source.draggableId可以解決TypeError: Cannot read property 'type1' of undefined 。