@computed 方法在 react + mobx 中不起作用

Question

我是 React 和 Mobx 的新手。我正在尝试使用 @computed 方法作为示例。我有复选框，在我更改它之后，状态（用户名）发生变化，但@computed 方法不会调用。这是我的代码：

LoginStore.js:

import { computed, observable } from "mobx";

class LoginStore {

  @observable
  username = "Daimon";

  @computed
  get report() {
    return this.username + "12345";
  }

}

var store = new LoginStore;
export default store;

授权：

import React, { Component } from 'react';
import { observer } from "mobx-react";

@observer
class Autorization extends Component {
  test = () => {
    this.props.store.username = "krikkk";
  }
  render() {
    return (
      <body>
        <p>{this.props.store.username}</p>
        <input type="checkbox" class="custom-control-input" id="customCheck1" onChange={this.test}/>
      </body>
    );
  }
}

export default Autorization;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Autorization from './Autorization';
import registerServiceWorker from './registerServiceWorker';
import loginStore from "./stores/LoginStore";

ReactDOM.render(<Autorization store={loginStore}/>, document.getElementById('root'));
registerServiceWorker();

package.json:

{
  "name": "autorization",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "custom-react-scripts": "^0.2.2",
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5"
  }
}

有人知道怎么解决吗？

Answer 1

更改用户名后不会重新调用您的@computed 方法，因为报告方法本身未在任何有效位置使用。

来自 mobx 官方文档：

Computed values are automatically derived from your state if any value that affects them changes. Computed values can be optimized away in many cases by MobX as they are assumed to be pure. For example, a computed property won't re-run if none of the data used in the previous computation changed. Nor will a computed property re-run if is not in use by some other computed property or reaction. In such cases it will be suspended.

要进行测试，您可以在授权组件的呈现器上更改

        <p>{this.props.store.username}</p>

到

        <p>{this.props.store.report}</p>

@computed 方法在 react + mobx 中不起作用

@computed method doesn't work in react + mobx

reactjs

mobx

mobx-react