Question

在mobx中使用上下文时。组件无法观察者上下文更改。

示例（只是一个简单的演示）：

const Context = createContext({})

class Parent extends Component {
  render() {
    return (
      <Context.Provider value={this.state.value}> // when value changed
        <Child/>
      </Context.Provider>
    )
  }
}

@observer
class Child extends Component {   
  // ... some other observable properties
  render() {
    return (
      <div>
        {this.context} // here not changed
      </div>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'))

更改上下文提供者的值时，Child和@observer无法更新。如何解决这个问题。

Answer 1

Mobx @observer不会观察React Context的变化。如果您希望组件根据上下文更改而更改，请使用默认值

<Context.Consumer>
  /* your component code here */
</Context.Consumer>

组件。

您可以在组件中混合使用@observer和<Context.Consumer>。

@observer
class Child extends Component {   
  // ... some other observable properties
  render() {
    return (
      <Context.Consumer>
        {value  /* value from context */=> <div>{value}</div>}
      </Context.Consumer>
    )
  }
}

参考

https://reactjs.org/docs/context.html#contextconsumer

如何进行Mobx观察者上下文的更改

1 个答案: