Непонимание getDerivedStateFromProps с Mobx - PullRequest
Новая
       43

Непонимание getDerivedStateFromProps с Mobx

2 голосов
/ 03 апреля 2019

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

Например, у меня есть хранилище с наблюдаемым объектом. 

class SomeStore {
    @observable
    status = {
        state: 'NOT_INITED',
    };

    @action
    async setStatusState = () => {
        this.status.state = 'STARTED';

        await something();
        this.status.state = 'ENDED';
    }

}

ДалееЯ ввел компонент 

@inject('someStore')
@observer
export default class SomeInjectedComponent extends Component {
    render() {
        return (
            <SomeComponent
                status={this.props.someStore.status}    
            />
        );
    }
}

Конец Я закончил компонент 

@observer
export default class SomeComponent extends Component {
    state = { isLoading: true }

    static getDerivedStateFromProps(props, state) {
        console.log(props.status.state);

        if (props.status.state === 'SUCCESS') {
            return { isLoading: false }
        }

        return null;
    }

    render() {
        if (!this.state.isLoading) {
           return null;`enter code here`
        }

        return <div>Loading</div>
    }
}

Проблема, что в console.log(props.status.state) я вижу только NOT_INITED, STARTED.Но ENDED не появляется.

Я думаю, потому что у меня нет this.props.status.state в методе рендеринга.Если я добавлю его в рендер (даже только console.log), все будет работать.

Что мне нужно сделать, чтобы увидеть изменения в getDerivedStateFromProps?

Спасибо.

1 Ответ

0 голосов
/ 03 апреля 2019

Может быть, вам стоит добавить флаг "isLoading" в ваш магазин.Это будет выглядеть примерно так: 

class SomeStore {
    @observable
    status = {
        isLoading: false,
        state: 'NOT_INITED',
    };

    @action
    async setStatusState = () => {
        this.status.state = 'STARTED';
        this.status.isLoading = true;

        await something();
        this.status.state = 'ENDED';
        this.status.isLoading = false;
    }

}

Ваш компонент 

@observer
export default class SomeComponent extends Component {

    render() {
        const { isLoading } = this.props.status
        if (!isLoading) {
           return null;
        }

        return <div>Loading</div>
    }
}
...