2017-10-18 89 views
1

我在文檔中看到,mobx反應提供了一個名爲componentWillReact的新生命週期。但是,似乎我的課只對渲染函數中的mobx更改作出反應。當我的商店更改時,不會觸發componentWillReact。MobX componentWillReact not firing

我發送「下一個」作爲道具。這個程序不使用mobx注入。

import { observer } from 'mobx-react'; 


@observer class QuickShopNew extends Component { 
    componentWillReact() { 
     console.log(this.props.store.next); 
    } 

    render(){ 
     //console.log(this.props.store.next); 
     return(
      <div> 
      </div> 
     ) 
    } 
} 
+0

您可以包括你的'store'在你的問題?這可能會提供一些線索,看哪些可能是錯誤的。 – Tholle

回答

1

正如我所看到的你的組件不取消引用在渲染方法中觀察到的屬性。這就是爲什麼mobx不知道該組件應該被重新渲染並且componentWillReact應該在值改變時被調用的原因。

你可以閱讀如何觀察員部分工作here

,這裏是simple working example上codepen

const { Component, PropTypes } = React; 
const { observable } = mobx; 
const { observer } = mobxReact; 


// Store for state 
class Store { 
    @observable next = 0; 
    increaseNext =() => this.next +=1; 
} 

let store = new Store(); 
@observer 
class MyComponent extends Component { 
    componentWillReact() { 
     console.log(this.props.store.next); 
    } 
    render() { 
    return (
     <div> 
     <h1>{this.props.store.next}</h1> 
     </div> 
    ); 
    } 
} 

class App extends Component { 
    render() { 
    return (
     <div> 
      <MyComponent 
      store={store} 
      /> 
     <button onClick={store.increaseNext}> 
      Increase 
     </button> 
     </div> 
    ); 
    } 
} 

// Insert into container 
ReactDOM.render(<App />, document.getElementById('app'));