Обновить внутреннее состояние на основе props (антипаттерн)
Я новичок в реагировании и сокращении, но я немного поработал с Angular / Vue.
У меня есть компонент с внутренним состоянием для отслеживания установки класса is-active в модальном окне. В этом модальном окне есть форма, которая будет выполнять запрос AJAX с использованием промежуточного программного обеспечения redux-thunk. Мне нужно знать, когда / если эти запросы AJAX завершаются успешно, и если да, закройте модальное окно (удалите класс is-active).
Я рассматривал возможность сделать компонент компонентом полностью контролируемый, но это означало бы поместить его в хранилище redux для установки состояния при успешных запросах AJAX.
Я также вижу, что componentWillReceiveProps устарел и, по-видимому, является анти-шаблоном, и я действительно не хочу использовать анти-шаблоны в своем приложении. Есть ли другой способ реализовать этот сценарий? Помощь Любой приветствуется !!
@Rahamin, ты прав, я просто создал редуктор для своего модального окна с методами открытия / закрытия для отправки при необходимости. Мне это решение нравится больше, чем реализация обратного вызова.
Ответы 1
Вам следует использовать новый статический метод getDerivedStateFromProps, вы можете сделать что-то вроде этого (убедитесь, что вы используете react: ^16.3.0):
state = { is_active: false, _is_active: false }
static getDerivedStateFromProps(nextProps, current_state) {
// you can should set isOpen via a props
// so based on your ajax call you can set this to false
let { isOpen } = nextProps;
if (isOpen !== current_state._is_active) {
return {
_is_active: isOpen,
is_active: isOpen
}
}
return { _is_active: false }
}
Затем вы можете настроить свое модальное окно на внутреннее закрытие через this.state.is_active или на отображение и закрытие извне через опору isOpen.
Я не вижу другого пути, кроме как полагаться на значение в магазине ... Как еще вы можете получить доступ к значению, установленному действием?