你在使用 MobX 6 吗？

Decorator API 略有变化，现在您需要makeObservable在构造函数中使用方法来实现与以前相同的功能：

class ExampleStore {
  @observable email = "hello";

  constructor() {
    makeObservable(this);
  }

  @action setEmail(email) {
    this.email = email;
  }
}

虽然有新的东西可能会让你完全放弃装饰器，makeAutoObservable：

class ExampleStore {
  email = "hello2";

  constructor() {
    // Don't need decorators now, just this call
    makeAutoObservable(this);
  }

  setEmail(email) {
    this.email = email;
  }
}

更多信息在这里：https : //mobx.js.org/react-integration.html

Codesandbox：https ://codesandbox.io/s/httpsstackoverflowcomquestions64268663-9fz6b ? file =/ src/App.js

尝试不破坏email字段：

  render() {
    return <div>{this.props.exampleStore!.email}</div>;
  }

就像 Danila 提到的那样，您可能会遇到MobX v6中的更改，您必须通过调用makeObservable或makeAutoObservable在类构造函数中显式地使每个类实例可观察：

class ExampleStore {
    constructor() {
        makeObservable(this);
    }
    @observable email = "hello";
    [...]
}

不过，我并不是真的很喜欢这种变化。添加构造函数 + 函数调用（对于不需要它的类）的额外步骤不是那么多；它更多地与这意味着我总是必须“检查类”以确保我已经为我添加的字段装饰器添加了“激活调用”。换句话说，它将“使该场可观察”的行动分为两部分，有时相距很远。

所以无论如何，我的解决方案是包装@observable装饰器，并让它检查构造函数的源代码以确保正在调用：（性能影响几乎没有，因为它只在定义类时运行）

const observableWarningGivenFor = new WeakSet<Function>();
export const obs = ((target: Object, propertyKey: string | symbol)=>{
    if (target.constructor instanceof Function && !target.constructor.toString().includes("makeObservable")) {
        if (!observableWarningGivenFor.has(target.constructor)) {
            console.warn(`The @obs decorator was used on "`
                + target.constructor.name + "." + String(propertyKey)
                + `", but the class is missing the "makeObservable(this);" call.`
                + ` See here for more info: https://mobx.js.org/enabling-decorators.html`);
            observableWarningGivenFor.add(target.constructor);
        }
    }
    return observable(target, propertyKey);
}) as typeof observable;

// copy ".ref", etc. fields from "observable" (not wrapped)
for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(observable))) {
    Object.defineProperty(obs, key, descriptor);
}

用法：（和正常一样）

class ExampleStore {
    constructor() {
        makeObservable(this);
    }
    @obs email = "hello";
    [...]
}

唯一的区别是，现在，如果我忘记为makeObservable(this);我添加了@obs装饰器的类添加调用，我会收到一条警告消息。