Не удалось выполнить removeChild при появлении ошибки «Node» при использовании setState в React - PullRequest
Новая
       51

Не удалось выполнить removeChild при появлении ошибки «Node» при использовании setState в React

0 голосов
/ 12 июля 2020

Итак, я пытаюсь заменить компонент на два уровня выше. Я использую перетаскивание для изменения состояния «клиенты», когда перетаскиваю элемент из одного контейнера в другой. 

this.state = {
  clients: {
    backlog: clients.filter(client => !client.status || client.status === 'backlog'),
    inProgress: clients.filter(client => client.status && client.status === 'in-progress'),
    complete: clients.filter(client => client.status && client.status === 'complete'),
  },
  drake: dragula({ revertOnSpill: true })
}

Я добавил все необходимые контейнеры, используя тег ref в моем JSX, а перетаскивание и функция drop работает, так что проблема не в этом. Я использую приведенную ниже функцию в компоненте, который был смонтирован. 

this.state.drake.on("drop", (el, target, source) => {
    this.handleDrop(el,target,source) 
})

Затем я использую функцию handleDrop, чтобы:

  1. Проверить, отличается ли целевой контейнер от исходного.
  2. Получить атрибут data-id перемещаемого элемента карты.
  3. Получить всех клиентов.
  4. Получить предыдущий статус клиента из перемещаемого элемента карты, чтобы я может изменить соответствующую часть объекта клиентов в состоянии.
  5. Заменить соответствующий статус переменной клиентов.
  6. Превратить его в объект и установить с ним setState. 
handleDrop(el, target, source) {
  if (target === source) {return}
  let cardID = el.getAttribute("data-id")
  const targetStatus = this.getTargetStatus(target)
  let clients = this.getClients()
  let prevClientStatus = el.getAttribute("data-status")
  if (!prevClientStatus) {
    prevClientStatus = 'backlog'
  } else if (prevClientStatus === 'in-progress') {
    prevClientStatus = 'inProgress'
  }
  for (let i = 0; i < clients.length; i++) {
    if (cardID === clients[i].id) {
      clients[i].status = targetStatus
      let clientsState = {        
        backlog: clients.filter(client => !client.status || client.status === 'backlog'),
        inProgress: clients.filter(client => client.status && client.status === 'in-progress'),
        complete: clients.filter(client => client.status && client.status === 'complete'),
      }    
      this.setState({
        clients: {
          backlog: clientsState.backlog,
          inProgress: clientsState.inProgress,
          complete: clientsState.complete
        }
      })
      break
    }
  }
}

Я протестировал весь код для изменения объектной переменной clientsState, и он выводит правильное значение на консоль. Проблема не в этом.

После запуска этого кода выскакивает следующая ошибка: 

×
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  102 |   inProgress: clients.filter(client => client.status && client.status === 'in-progress'),
  103 |   complete: clients.filter(client => client.status && client.status === 'complete'),
  104 | }    
> 105 | this.setState({
      | ^  106 |   clients: {
  107 |     backlog: clientsState.backlog,
  108 |     inProgress: clientsState.inProgress,

Это сводит меня с ума, и я провел 4 дня, пытаясь выяснить, где проблема в том. Буду признателен за любую помощь, потому что я в своем уме.

...