文章/答案/技术大牛

发布

社区首页 >问答首页 >@计算方法在react + mobx中不起作用

问@计算方法在react + mobx中不起作用
EN

Stack Overflow用户

提问于 2018-09-24 19:44:28

回答 1查看 2.3K关注 0票数 1

我是新来的反应和暴徒。我正在尝试使用@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"
  }
}

有人知道怎么解决吗？

reactjs

mobx

mobx-react

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-24 22:41:53

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

来自mobx官方文件：

如果任何影响到计算值的值发生变化，则计算值将自动从状态派生出来。在许多情况下，MobX可以对计算值进行优化，因为它们被假定为纯值。例如，如果上一次计算中使用的数据没有任何变化，计算的属性将不会重新运行。如果其他计算属性或反应不使用，也不会重新运行。在这种情况下，将被暂停。

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

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

至

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52486322

复制

相似问题

问@计算方法在react + mobx中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@计算方法在react + mobx中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@计算方法在react + mobx中不起作用
EN