Как изменить контекст наблюдателя mobx

При использовании контекста с 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 не может обновляться. Как это исправить.


reactjs mobx mobx-react
person XGHeaven    schedule 07.05.2019    source источник
comment
, как вы меняете состояние? Убедитесь, что вы используете действия для изменения состояния. Это должно работать.   -  person AConsumer    schedule 07.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

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>
    )
  }
}

Рекомендации

person Daniel    schedule 08.05.2019