使用mobX的应用程序中的状态变化

Question

我的任务是在服务器数据尚未到达时显示下载组件。

export const LoaderComponent = () => (
    <View style={styles.center}>
        <ActivityIndicator size="large" />
    </View>
);

const styles = StyleSheet.create({
    center: {
        .....
    },
});

我创建了一个状态文件来显示启动组件。

import { observable, action } from 'mobx';

class LoaderState {
    @observable loading: boolean = true;

    @action showLoader() {
        this.loading = true;
    }

    @action hideLoader() {
        this.loading = false;
    }
}

export default new LoaderState();

[授权用户时，我显示下载组件，从服务器接收数据后，我隐藏了下载组件。我人为地延迟了两秒钟。

class AuthState {
    @observable email: string = '';
    @observable password: string = '';

    @action authentication(data: IAuth) {
        console.log('Action authentication');

        LoaderState.showLoader();

        ....

        setTimeout(() => {
            LoaderState.hideLoader();
            console.log('Change state loader', LoaderState.loading);
        }, 2000);
    }
}

export default new AuthState();

在下一个屏幕上，我检查是否设置了下载标志，显示了下载组件，否则，我将其隐藏。

export const ProvidersScreen = () => {
    console.log(LoaderState.loading);

    if (LoaderState.loading) {
        return <LoaderComponent />;
    }

    return (
        <View>
            ....
        </View>
    );
};

问题在于，总是显示下载组件，并且当状态改变时，它不会被隐藏。为什么下载组件没有隐藏？

Answer 1

我认为原因是您的ProvidersScreen不是observer组件，请尝试：

export const ProvidersScreen = observer(() => {
    console.log(LoaderState.loading);

    if (LoaderState.loading) {
        return <LoaderComponent />;
    }

    return (
        <View>
            ....
        </View>
    );
});