React Mobx - 组件在更改存储后未更新

使用Mobx，在更新存储（即单击按钮）后，组件不会重新呈现。我已经安装了mobx devtools，在初始加载后没有显示任何内容，并且在控制台中没有错误。任何想法我做错了什么？React Mobx - 组件在更改存储后未更新

Store.js：

import { observable } from 'mobx'; 

class Store { 

    @observable me; 

    constructor() { 
     this.me = 'hello'; 
    } 

    change_me(){ 
     this.me = 'test 1234'; 

    } 

} 


export default Store;

layout.js：

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


@observer 
export default class Layout extends React.Component{ 

    render(){ 

     return(
      <div> 
       <h1>{this.props.store.me}</h1> 
       <button onClick={this.on_change}>Change</button> 
      </div> 
     ) 
    } 

    on_change =() => { 
     this.props.store.change_me(); 
    } 
}

index.js：

import React from "react"; 
import ReactDOM from "react-dom"; 
import Layout from "./components/Layout"; 
import Store from "./Store"; 
import DevTools, { configureDevtool } from 'mobx-react-devtools'; 

// Any configurations are optional 
configureDevtool({ 
    // Turn on logging changes button programmatically: 
    logEnabled: true, 
    // Turn off displaying conponents' updates button programmatically: 
    updatesEnabled: false, 
    // Log only changes of type `reaction` 
    // (only affects top-level messages in console, not inside groups) 
    logFilter: change => change.type === 'reaction', 
}); 


const app = document.getElementById('app'); 
const store = new Store(); 

ReactDOM.render(

    <div> 
     <Layout store={store} /> 
     <DevTools /> 
    </div> 
, app);

来源

2016-11-20 Chris

我复制粘贴你的代码和它在我的环境中工作'更新商店后，组件不重新渲染'意味着你点击按钮后右边？ – Max

是的，所以它适合你吗？还有什么可以吗？ – Chris

只是一个狂野猜测，检查你的导入目录，是否正确 – Max

我会加入@action您change_me start（）函数。根据我的理解，并不总是完全需要，但是当我忘记添加它时，在我自己的代码中遇到过几次这样的问题。

此外，建议您将.babelrc作为@mweststrate发布，因为它可以帮助其他人检查是否加载了正确的插件。

来源

2016-11-20 18:23:01 cdoc

观察此上下文的绑定。

<button onClick={this.on_change}>Change</button>

this引用不会到类，所以有可能当你实际上是单击它会说沿着未定义没有道具线的东西。改为：

<button onClick={this.on_change.bind(this)}>Change</button>

应该修复它。或者更好的是，绑定构造函数中的上下文所以它不是在每一个重新绑定渲染

constructor(props) { 
    super(props) 
    this.on_change = this.on_change.bind(this) 
}

那么你可以回到你的

来源

2016-11-20 18:57:42 dpastoor

这是非常错误的答案，原因有两个。首先，on_change通过声明的方式与此绑定，所以{this.on_change}的原始调用很好。然后，有。bind（）在{}内是一种反模式，导致性能降级，并且不应该被使用。 – Nopik

@Nopik其实并非如此。 'on_change'不绑定到'this'。 React autobinds类似的方法，但只有当组件是通过'createClass'声明的，而不是在使用ES6类的时候。 – Sulthan

@Nopik，苏丹说，你真的需要阅读你的约束力。另外，正如我在下面演示的那样，正确的模式是在构造函数中进行绑定。你也可以在这里阅读更多：http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html – dpastoor

我的猜测是有未初始化@observable。这是非常直观的，但巴贝尔并没有很好地处理这些问题。即使加上@observable me = undefined可能会有所帮助（当你指定一些东西的时候，看到生成的js代码）。通常我会完全移除构造函数并将初始化移动到声明中（即@observable me = "hello"没有构造函数），然后应该可以正常工作

来源

2016-11-20 22:30:37 Nopik

React Mobx - 组件在更改存储后未更新

回答

相关问题