使用 mobX 的 React 应用程序中的状态更改

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>
    );
});

Answer 2

您忘记添加观察者

添加以下代码：

import { observer } from "mobx-react";

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

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

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

使用 mobX 的 React 应用程序中的状态更改

State changes in a react application with mobX

react-native

mobx

mobx-react