React^17.0.1; mobx^6.1.8; mobx-react^7.1.0;

原代码

export default class AuthStore {

    @observable token: string;
    @observable username: string;
    @observable avatar: string;

    constructor() {
        this.token = getOrDefault('token', '');
        this.username = '';
        this.avatar = '';
    }

    @action public signIn(token: string) {
        this.token = token;
        localStorage.setItem('token', token);
    }

    @action public setInfo(name: string, avatar: string) {
        this.username = name;
        this.avatar = avatar;
    } 

    @action public signOut() {
        this.token = '';
        localStorage.removeItem('token');
    }

}

注入到组件中并调用action时，数据能发生改变，但页面始终不会重新渲染，找遍了全网，最后发现时mobx在6以后的版本，必须在构造函数中调用方法makeObservable()或者makeAutoObservable()。调用后者的时候可以不用再为字段和方法添加@observable和@action。

修改后的代码

import { makeAutoObservable } from 'mobx';
export default class AuthStore {

    token: string;
    username: string;
    avatar: string;

    constructor() {
        this.token = getOrDefault('token', '');
        this.username = '';
        this.avatar = '';
        makeAutoObservable(this);
    }

    public signIn(token: string) {
        this.token = token;
        localStorage.setItem('token', token);
    }

    public setInfo(name: string, avatar: string) {
        this.username = name;
        this.avatar = avatar;
    } 

    public signOut() {
        this.token = '';
        localStorage.removeItem('token');
    }

}

网上的资料很多是老版本的，时效性并不好，有能力的还是看看官方文档或者直接去Github issue看看有没有同样踩坑的。