TypeError: Невозможно уничтожить свойство 'handleShow' объекта 'null', поскольку оно равно null

Question

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

У меня есть две маленькие функции, которые обе контролируют видимость модального элемента React Bootstrap и поможет передать ему некоторые параметры.

Вот две функции:

modalVisibility = ({ handleShow }) => {
  this.showModal = handleShow;
};

openArticle = data => {
  console.log(data.title);
  this.setState(
    {
      title: data.title,
      content: data.fullArticle        },
    () => {
      this.showModal();
    }
  );
};

Вот модальный компонент, который они запускают:

<Modal ref={this.modalVisibility} title={this.state.title} article={this.state.content}></Modal>

И кнопка триггера:

<button onClick={() => this.modalVisibility(data)}>

Все вышеперечисленное работает (в основном) нормально.

Проблема возникает, когда я хочу выйти из этого компонента и go к другому с помощью меню navbar (с использованием response-router-dom). Всякий раз, когда я переключаюсь на другую страницу, появляется указанная выше ошибка:

TypeError: Невозможно деструктурировать свойство 'handleShow' объекта 'null', поскольку оно равно null

и нет оставь, пока я не обновлю sh страницу. Затем он появляется снова после того, как я go вернулся на страницу с модалом и снова переключился на любую другую.

Answer 1

Перепишите функцию modalVisibility ниже, чтобы вы могли поставить точку останова и проверить, почему вызывается modalVisibility.

modalVisibility = (obj) => { 
   this.showModal = obj && obj.handleShow 
}