2017-10-18 135 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'));