reactjs - 为什么 MobX v6.x 在 React with Typescript 中不能按预期工作？

Question

我目前正在编写一个 React 应用程序，当任何可观察的值发生变化时，它应该能够重新渲染组件。问题是，我无法得到 email如果更改，则重新渲染。
store.ts

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

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

索引.tsx

const stores = {
  exampleStore
};

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

应用程序.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>;
  }
}

我见过很多使用 useContext 的例子钩，但我必须使用类组件。我不确定为什么这不会再次调用渲染函数。我有 mobx和 mobx-react安装。

Answer 1

你在使用 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
代码沙盒: https://codesandbox.io/s/httpsstackoverflowcomquestions64268663-9fz6b?file=/src/App.js