This.props.history.push работает сразу после обновления
У меня есть реактивный большой календарь, в котором есть кнопка, когда я нажимаю на нее, появляется его модальное окно, а также у меня есть кнопка со значком календаря, которая перенаправляет меня на другой URL-адрес/планирование.
У меня есть диалог (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
Как я могу это исправить?
@rrd Как я могу это исправить, пожалуйста? можешь проверить мою песочницу?
В этом случае изменение реквизита не является проблемой. this.props.history указывает на объект истории react-router, а вызов push является одним из рекомендуемых способов перенаправления с использованием react-router. Подробнее: reacttraining.com/react-router/web/api/история
Какой файл/строка выдает ошибку? Ошибка означает, что вы пытаетесь обновить состояние несмонтированного компонента. Во-первых, это не проблема маршрутизации.
@sschmeck ошибка TypeError: Cannot read property 'handleAjouter' of null в компоненте Agenda
С <AjouterDisponibilite ref = {this.ModalAjout} /> метод ModalAjout вызывается без параметра. Метод пытается разрушить структуру null. Кажется, проблема refиспользования.
Да, именно @sschmeck, но как я могу это исправить, пожалуйста?
ref еще не пользовался. Вы можете улучшить вопрос, указав на проблему ref. :-)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Лучший способ решить эту проблему вы можете добавить этот код:
history.pushState(null, document.title, location.href);
Что делает? Он инициализирует историю одним значением после того, как она была загружена в первый раз, тогда вам не нужно обновлять.
В моем случае я сделал это, когда разрабатывал приложение для Android, и у меня было несколько модальных окон, которые я хотел закрыть с помощью кнопки «Назад», чтобы обеспечить более естественный опыт.
Я исправляю это, добавляя:
<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 должен иметь параметр.
Проблема в неправильном использовании Refs. Рефы предназначены для хранения ссылок на 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;
}
}
и я называю его компонент с помощью <AjouterDisponibilite ref = {(evt) => this.ModalAjout({evt})}/> ?
Я пытаюсь это сделать, но это не работает, вы можете проверить это, пожалуйста? codeandbox.io/s/xw01v53oz
Нет, вы его не называете, вы просто передаете его пропу ref = {this.ModalAjout} как это было раньше.
не могли бы вы проверить мою песочницу, пожалуйста? codeandbox.io/s/xw01v53oz Я пытаюсь, как вы говорите, и это не работает.
У меня есть метод newEvent, который вызывает this.ajout( this.state.startDisponibilite, this.state.endDisponibilite, this.state.dateDisponibilite );
Ошибка, которая у вас сейчас есть, связана с неопределенными переменными состояния в вашем компоненте AjouterDisponibilite и не имеет ничего общего с заданным здесь вопросом. Но поскольку это быстрое решение: tranchesC не определено в вашем состоянии. И вы должны изменить onClick = {this.ajoutb} на onClick = {() => this.ajoutb()}
Спасибо @Rallen, это работает хорошо. Можете ли вы помочь мне в этом, пожалуйста? stackoverflow.com/questions/56003028/…
Реквизиты неизменяемы в React. Не изменяйте их так. Если вы хотите сохранить данные для использования в компоненте, используйте состояние или, конечно же, передайте от родителя.