Reactjs 为什么'；t MobX v6.x是否在React with Typescript中按预期工作？

我目前正在编写一个React应用程序，当任何可观察到的值发生变化时，它应该能够重新启动组件。问题是，如果邮件内容发生变化，我就无法将

电子邮件

重新发送

store.ts

export class ExampleStore {
  @observable email = 'hello';

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

index.tsx

const stores = {
  exampleStore
};

ReactDOM.render(
  <Provider {...stores}>
    <App />
  </Provider>,
  document.querySelector('#root')
);

const存储={
示例商店
};
ReactDOM.render(
,
document.querySelector（“#root”）
);

App.tsx

interface Props {
  exampleStore?: ExampleStore;
}

@inject('exampleStore')
@observer
export class App extends React.Component<Props, {}> {
  componentDidMount() {
    setInterval(() => {
      this.props.exampleStore!.setEmail(Math.random() * 10 + '');
    }, 2500);
  }

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

界面道具{
示例商店？：示例商店；
}
@注入（'exampleStore'）
@观察者
导出类应用程序扩展React.Component{
componentDidMount（）{
设置间隔（（）=>{
this.props.exampleStore！.setEmail（Math.random（）*10+''）；
}, 2500);
}
render（）{
const{email}=this.props.exampleStore！；
返回{email}；
}
}

---

我已经看到许多示例使用了

useContext

hook，但我必须使用类组件。我不知道为什么它不会再次调用渲染函数。我已安装了

mobx

和

mobx react

。

在不破坏

电子邮件

字段的情况下尝试：

render（）{
返回{this.props.exampleStore！.email}；
}

您使用的是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;
  }
}

更多信息请点击此处：

---

Codesandbox:

这是同样的事情，不管你在哪里取消引用。我想他使用的是Mobx6，它有不同的装饰api。他使用的是Mobx6.x，只是在他们的变更日志中看到了它。谢谢你的回答！是的！对的谢谢