Reactjs @计算方法不'；t在react+中工作；莫布_Reactjs_Mobx_Mobx React

Reactjs @计算方法不'；t在react+中工作；莫布

reactjs

Reactjs @计算方法不'；t在react+中工作；莫布,reactjs,mobx,mobx-react,Reactjs,Mobx,Mobx React,我是react和mobx的新手。我尝试使用@computed方法作为示例。我有这个复选框，在我更改它之后，状态（用户名）会更改，但是@computed方法不会调用。这是我的密码： LoginStore.js： import { computed, observable } from "mobx"; class LoginStore { @observable username = "Daimon"; @computed get report() { return t

我是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;

有人知道如何解决这个问题吗？

更改用户名后，@computed方法不会被重新调用，因为报表方法本身没有在任何有效位置使用

从mobx官方文档：

如果影响计算值的任何值发生更改，则计算值将自动从您的状态派生。在许多情况下，计算值可以通过MobX进行优化，因为它们被认为是纯的。例如，如果上一次计算中使用的数据没有更改，则计算属性将不会重新运行如果某个计算属性未被其他计算属性或反应使用，则该计算属性也不会重新运行。在这种情况下，它将被挂起

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

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

{this.props.store.username}

到

{this.props.store.report}

{
  "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"
  }
}

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

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