React Mobx componentDidUpdate не обновляется при наблюдаемых изменениях

Я новичок в Mobx и reactjs в целом, у меня есть знания в Redux и я реагирую нативно, а в Redux, когда я использовал для вызова действия и обновления реквизита, запускается метод жизненного цикла componentDidUpdate.

У меня сейчас сценарий входа в систему. поэтому пользователь заполняет форму, нажимает кнопку «Отправить», а отправка вызывает действие Mobx (асинхронно), и когда сервер отвечает, наблюдаемый объект обновляется, а затем он переходит на главную страницу (навигация происходит в компоненте).

Вот код моего магазина.

import { autorun, observable, action, runInAction, computed, useStrict } from 'mobx';

useStrict(true);

class LoginStore {
    @observable authenticated = false;
    @observable token = '';

    @computed get isAuthenticated() { return this.authenticated; }


    @action login = async (credentials) => {
        const res = await window.swaggerClient.Auth.login(credentials)l
        // checking response for erros
        runInAction(() => {
            this.token = res.obj.token;
            this.authenticated = true;
        });
    }
}

const store = new LoginStore();

export default store;

export { LoginStore };

и этот обработчик находится в моем компоненте.

handleSubmit = (e) => {
        e.preventDefault();

        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.store.login(values);
            }
        });
    }

    componentDidUpdate() {
        if (this.props.store.isAuthenticated) {
            const cookies = new Cookies();
            cookies.set('_cookie_name', this.props.store.token);
            this.props.history.push('main');
        }
    }

Это не идеальный код, я просто экспериментирую, но не совсем понимаю.

Кроме того, если я использую вычисленное значение (isAuthenticated) в методе жизненного цикла render, запускается componentDidUpdate, но если я не использовал его в методе render, componentDidUpdate не запускается. Например, если я сделаю это

render() {
  if (this.props.store.isAuthenticated) return null
  // .... rest of the code here
}

приведенное выше вызовет componentDidUpdate.

Я что-то упускаю? есть ли лучший способ сделать это с помощью Mobx? Спасибо


reactjs mobx mobx-react
person Ibraheem Al-Saady    schedule 06.10.2017    source источник
comment
Компонент React-наблюдателя будет повторно визуализироваться, когда изменятся наблюдаемые объекты, ссылки на которые были отменены в последнем рендеринге. Может, лучше вынести эту логику отдельно от представления?   -  person Tholle    schedule 07.10.2017
comment
@Tholle: да, определенно логика должна быть отделена от представления, я просто экспериментирую с mobx, и я хотел узнать об этом конкретном случае. Спасибо за предложение :)   -  person Ibraheem Al-Saady    schedule 07.10.2017

Ответы (1)


arrow_upward
10
arrow_downward

Компонент Observer будет реагировать только на наблюдаемые объекты, указанные в его методе render. Документация MobX охватывает это.

Я бы порекомендовал вам использовать when для решения проблемы.

componentDidMount() {
  when(
    () => this.props.store.isAuthenticated,
    () => { 
      // put your navigation logic here
    }
  );
}
person Alik    schedule 07.10.2017
comment
это та же проблема, он не запускается, если функция рендеринга не имеет this.props.store, а если функция рендеринга имеет его, запускается componentDidUpdate. что здесь может быть не так? - person Ibraheem Al-Saady; 07.10.2017
comment
о, спасибо за объяснение, и это сработало, как я хотел. when безопасно ли использовать в производстве? - person Ibraheem Al-Saady; 07.10.2017
comment
@ IbraheemAl-Saady, что ты имеешь в виду? Мы используем when в нашем производственном коде, и он работает так, как должен. Я не понимаю, о какой безопасности вы говорите. - person Alik; 08.10.2017
comment
@Alik показывает ошибку, когда не определено. Как это импортировать? - person Yerlan Yeszhanov; 09.04.2019