MobX 观察者不会对可观察到的变化做出反应

Question

这是我的观察结果：

class AppState implements IAppState {
  private static instance: AppState;
  public static getInstance(): AppState {
    if (!AppState.instance) {
      AppState.instance = new AppState(AppState.initState);
    }

    return AppState.instance;
  }

  static initState: IState = {
    isLoading: true,
    isSignedIn: false,
  };
  private appState: IState;

  private constructor(state: IState = AppState.initState) {
    makeAutoObservable(this);
    this.appState = state;
  }

  set isLoading(isLoading: boolean) {
    runInAction(() => (this.appState.isLoading = isLoading));
  }

  set isSignedIn(isSignedIn: boolean) {
    runInAction(() => (this.appState.isSignedIn = isSignedIn));
  }

  get state() {
    return this.appState;
  }
}

我在这里观察到它：

const StackNavigator = observer(() => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: false,
      }}
    >
      {!AppState.state.isSignedIn ? (
        <>
          <Stack.Screen name="Login" component={WelcomeScreen} />
          <Stack.Screen name="Signup" component={SignUpVM} />
        </>
      ) : (
        <>
          <Stack.Screen name="Main" component={MainScreen} />
        </>
      )}
    </Stack.Navigator>
  );
});

但是当 AppState.state.isSignedIn 更改时，不会发生重新渲染。可能是什么原因？这可能与我在 React Navigation 组件上使用 observable 而不是自定义组件有关吗？任何帮助将不胜感激。

Answer 1

尝试更改构造函数中的顺序：

  private constructor(state: IState = AppState.initState) {
    this.appState = state;
    makeAutoObservable(this);
  }

来自docs

make(Auto)Observable only supports properties that are already defined. Make sure your compiler configuration is correct, or as work-around, that a value is assigned to all properties before using make(Auto)Observable. Without correct configuration, fields that are declared but not initialized (like in class X { y; }) will not be picked up correctly.

MobX 观察者不会对可观察到的变化做出反应

MobX observer does not react on observable change

mobx

mobx-react