Реагировать на внешний интерфейс отличается от состояния - PullRequest
Новая
       24

Реагировать на внешний интерфейс отличается от состояния

1 голос
/ 31 мая 2019

Я строю приложение реакции, которое создает графики. Для этого я использую Reaction-D3-Geaph . График получает данные из состояния следующим образом: 

   data: {
    nodes: [
         { "id": "1", "name": "connector"},
         { "id": "2", "name": "id1"},
         { "id": "3", "name": "node"}
     ],
     links: [
         {"source": "1" , "target": "2"},
         {"source": "3" , "target": "1"}
       ]
   }

Визуализированный график выглядит следующим образом: enter image description here

То, чего я сейчас пытаюсь добиться, - это удалить ссылку, когда пользователь нажимает на нее. response-d3-graph предоставляет метод, который возвращает источник и цель по нажатой ссылке. Поэтому я написал следующую функцию, чтобы найти и удалить нужную ссылку: 

delLink(source, target) {

    var data = {...this.state.data};
    var dataArray = [...data.links];

    for(var i = 0; i < dataArray.length; i++) {
      if(dataArray[i].source === source && dataArray[i].target === target) {
        console.log(i);
        dataArray.splice(i, 1);
        data.links = dataArray;
        this.setState({data: data}, function () {
          console.log(this.state.data);
        });
      }
    }
   }

Эта функция успешно находит индекс массива состояний и затем удаляет его. Пока я консоль.log новое состояние я получаю желаемый результат. Например, если я нажму на ссылку от разъем до id1 , это будет новое состояние: 

data: {
    nodes: [
         { "id": "1", "name": "connector"},
         { "id": "2", "name": "id1"},
         { "id": "3", "name": "node"}
     ],
     links: [
         {"source": "3" , "target": "1"}
       ]
   }

Однако проблема в том, что, хотя функция работает должным образом и удаляет правильный индекс из массива links , приложение отображает неверный график с удаленной неверной ссылкой: enter image description here

После некоторых попыток я понял, что по любой ссылке, которую я нажимаю, приложение удалит последнюю ссылку из массива ссылок. Наконец, если я сохраню новый график через приложение и обновлю его, на этот раз я получу правильный график со ссылкой между node и connector .

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

Пожалуйста, скажите, нужна ли вам какая-либо другая информация. Заранее спасибо!

1 Ответ

0 голосов
/ 31 мая 2019

Array :: splice изменяет массив на месте, вы хотите вернуть совершенно новый массив ссылок с отфильтрованным удаленным.

array :: splice mdn

Сейчас я работаю на мобильном телефоне, но, если хотите, я могу привести пример, который поможет проиллюстрировать это.

[Edit] Ой, я вижу, что вы сначала копируете массив, но затем сохраняете его обратно в данных, которые являются ссылкой на предыдущее состояние.Попробуйте распространить предыдущее состояние (и массив из-за поверхностного копирования) в новый объект данных, изменить его там и установить состояние как обычно.

Можете ли вы предоставить пример кодов и ящиков для проверки?

...