React Native & MobX: useContext不会将更改重新呈现到屏幕上

Question

我一直在尝试使用mobX来应用于React Native Functional组件。所以我使用了这两个库- mobx & mobx-react-lite。

我做了一个简单的计数器应用程序，我也与此useContext挂钩。增加该值后，它不会在屏幕上应用。然而，它出现在我的控制台上。在我通过保存刷新代码(我没有更改代码)之后，更改就会显示出来。

我该如何解决这个问题？

App.js

import { StyleSheet, Text, View,Button } from 'react-native';
import { CounterStoreContext } from './components/CounterStore';
  
import { observer } from "mobx-react-lite";
import React, { useContext, useState } from "react";

const App = observer(() => {
  // const [count, setCount] = useState(0);
  const counterStore = useContext(CounterStoreContext)
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome</Text>
      <Text style={styles.text}>Just Press the damn button</Text>
      {/* <Text style={styles.text}>{count}</Text> */}
      {/* <Button title="Increase" onPress={()=>{setCount(count+1)}}/> */}
      <Text style={styles.text}>{counterStore.count}</Text>
      <Button title="Increase" onPress={()=>{
        counterStore.count++;
        console.log(counterStore.count)
        // setCount(counterStore.count)
      }}/>      
    </View>
  );
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  welcome:{
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  text:{
    fontSize: 14,
    textAlign: 'center',
  },
});

export default App;

CounterStore.js

import { observable, observe } from "mobx";
import { createContext } from "react";

class CounterStore {
    @observable count = 0;
}

export const CounterStoreContext = createContext(new CounterStore())

Answer 1

Since MobX 6 the @observable decorator is not enough。您还需要在构造函数中使用makeObservable / makeAutoObservable。

class CounterStore {
    @observable count = 0;

    constructor() {
        makeAutoObservable(this);
    }
}