Исчезновение элементов изображения Konva

Question

Я создаю своего рода редактор изображений с помощью Konva. У меня есть меню, где изображения выбираются и добавляются на сцену. Он работал нормально, пока я не добавил возможность добавлять несколько изображений.

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

Функция устанавливает переменную 'active' в true, когда элемент выбирается. В тех же элементах выбирается снова, «активный» будет установлен на ложь. Это работает отлично, проблема возникает, когда я устанавливаю переменную 'active' элемента в false, щелкая где-нибудь вокруг него.

Раньше он просто отменял выбор и оставался на своем месте, но теперь, когда я отменяю его выбор извне, весь элемент становится невидимым. У меня также есть свойство visible для каждого элемента, но оно имеет значение true и не изменяется во время этого процесса.

1. Функция onClick элементов:

    onClick(){

      if (this.props.ElementReducer.element === null){
         // console.log("There is no element selected || I´m getting selected");
        this.setState({
          active: true
        });
        this.props.selectedElement(this.state);
      }else{
        if (this.props.ElementReducer.element.identity == this.state.identity){
          // console.log("I am already selected || I´m getting deselected");             
          this.setState({
            active: false
          });
          this.props.unSelectedElement();
        }else{
          // console.log("Something else is selected || I´m getting selected");                        
          this.props.prepareToUnSelectElement();
          setTimeout(()=> {
            this.props.unSelectedElement();
            this.setState({
              active: true
            });
            this.props.selectedElement(this.state);
          },10);
        }
      }
    }

2. Внешняя функция отмены выбора:

    deselectElement() {
      if (this.props.ElementReducer.selectedId !== -1) {
        this.props.prepareToUnSelectElement();
        setTimeout(this.props.unSelectedElement, 100);
      }
    }

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

Любые идеи или комментарии хорошо приняты, спасибо.

---

Чтобы было понятно, '2. Внешняя функция отмены выбора 'вызывает пару функций в другом компоненте, который делает то же самое, что и' 1. Элементы onClick '. Устанавливает для активного свойства значение false, а затем удаляет элемент из файла редуктора редакции элемента.

Answer 1

Проблема, как я полагаю, заключалась в том, что, поскольку компонент Konva.image требует, чтобы узел изображения ссылался при его создании. При отмене выбора изображения со сцены React.Component, где находился начальный узел изображения, не будет отображаться до тех пор, пока Konva.image снова не будет выбран, поэтому Konva.image терял эту ссылку на изображение для отображения в это и оно исчезло.

Именно поэтому сам компонент все еще будет на сцене, но изображение не будет отображаться до тех пор, пока Konva.image снова не будет выбран.

Я просто сохранил состояние Konva.image перед повторным рендерингом компонента, в котором ссылочный узел Image не собирался повторный рендеринг. Я надеюсь, что это достаточно ясно.

Спасибо за помощь.