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 - 組件在更改存儲後未更新

回答

相關問題