this.props.history.push работает сразу после обновления - PullRequest
Новая
       30

this.props.history.push работает сразу после обновления

2 голосов
/ 07 мая 2019

У меня есть реактивный большой календарь, на котором есть кнопка, когда я нажимаю на нее, появляется его модальное окно, а также кнопка со значком календаря, которая перенаправляет меня на другой URL /planning.

У меня есть диалоговое окно (AjouterDisponibilite), и я вызываю его с ссылкой на мой компонент Agenda.

И значок календаря имеет событие onClick, которое я пытаюсь: 

this.props.history.push('/planning');

, но когдаЯ запускаю его и нажимаю на значок, URL-адрес направлен правильно, но я получаю error, как показано ниже:

TypeError: Cannot read property 'handleAjouter' of null и Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

и после обновленияна этой странице все работает.

Мой код: https://codesandbox.io/s/xw01v53oz

Как это исправить?

Ответы [ 3 ]

3 голосов
/ 07 мая 2019

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

Компоненты с ref пропеллом будут присваивать себе значение опоры (или вызывать функцию с самим собой в качестве аргумента), когда они монтируются, и они будут делать то же самое со ссылкой null, когда они демонтирована.

Обладая этими знаниями, вы должны изменить свой код компонента Agenda следующим образом: 

ModalAjout = (ref) => {
    if (ref) {
        this.ajout = ref.handleAjouter;
    } else {
        this.ajout = null;
    }
}

ModalAjoutb = (ref) => {
    if (ref) {
        this.ajoutb = ref.handleAjouter;
    } else {
        this.ajoutb = null;
    }
}
2 голосов
/ 07 мая 2019

Я исправлю, добавив: 

<AjouterDisponibilite ref={(evt) => this.ModalAjout({evt})} start={this.state.startDisponibilite} end={this.state.endDisponibilite} date={this.state.dateDisponibilite}/>
<AjouterDisponibilite ref={(evt) => this.ModalAjoutb({evt})} />

Метод ModalAjout должен иметь параметр.

2 голосов
/ 07 мая 2019

Лучший способ решить эту проблему вы можете добавить этот код: 

history.pushState(null, document.title, location.href);

Что делает? Она инициализирует историю одним значением после первой загрузки, и вам не нужно делать обновление.

В моем случае я делал это, когда разрабатывал приложение для Android, и у меня было несколько модальностей, которые я хотел закрыть с помощью кнопки «Назад», чтобы обеспечить более естественную работу.

...