response-native Как слушать обновленное состояние mobx - PullRequest
Новая
       7

response-native Как слушать обновленное состояние mobx

0 голосов
/ 02 января 2019

В моем собственном проекте реакции, когда я нажимаю кнопку, состояние моего приложения mobx обновляется.

Я хочу использовать реаги lifecycle method, чтобы прослушать это обновление и автоматически обновить его.Поэтому я использую componentDidUpdate.

  componentDidUpdate(nextProps, nextState) {
    this.setState({number:store.requestObject.number},
    console.log(this.state.number), 'state changed')
  }

Но, похоже, этот метод не обновляется автоматически.

Должен ли я использовать другой метод жизненного цикла?Любые комментарии или советы будут действительно полезны.Заранее спасибо!

Отредактировано

На моем первом экране у меня есть кнопка и onPress Я могу сохранить данные в mobx store.Затем на втором экране я хочу вызвать mobx state и обновить его, указав состояние моего текущего компонента.Я мог бы использовать кнопку что-то вроде: 

 <Button onPress={()=> this.setState({currentState:store.mobxState})}>

Тогда мой текущий component state будет соответствовать mobx state, он работает нормально, но я хочу сделать это автоматически (не с кнопкой).

Ответы [ 4 ]

0 голосов
/ 02 января 2019

Используйте реакцию setState обратный вызов : 

componentDidUpdate(prevProps, prevState) {
  this.setState(
    { number: store.requestObject.number },
    () => console.log(this.state.number, 'state changed') // callback will fire after state update
  );
}

Обратите внимание, что состояние установки в пределах componentDidUpdate рекомендуется выполнять за условной проверкой, чтобы код не попадал в бесконечный цикл. Код выше будет. Кроме того, параметры, которые он получает, являются предыдущим состоянием и реквизитом, а не следующим. Он вызывается только после того, как состояние было обновлено или компонент получил новые значения проп. 

componentDidUpdate(prevProps, prevState) {
  if (prevProps.value !== this.props.value) {
    // handle change, log it, api call, call other callback, etc...
  }
}
0 голосов
/ 02 января 2019

Вы можете использовать getDerivedStateFromProps

static getDerivedStateFromProps(props, state){

}

Обратите внимание, что этот метод запускается при каждом рендере, независимо от причина. Это в отличие от UNSAFE_componentWillReceiveProps, который срабатывает только тогда, когда родитель вызывает повторную визуализацию, а не в результате local setState.

1010 * Reference *

Если быть более точным, при вызове this.setState({}) будет вызван ваш getDerivedStateFromProps, и оттуда вы сможете прочитать значение измененного состояния и выполнить некоторые операции.

0 голосов
/ 02 января 2019

, если вы не хотите использовать данные методы, создайте пользовательское событие, которое прослушивает состояние 

stateListiner = (state) =>{
  this.setState(state,()=>{
    //listen to state change after setting it 
    // add your logic after state update 
  })
}

// call the state 
let givenState = {name:'xyz',visible:false,}
this.stateListiner(givenState) // this will set your state and fire the callback function
0 голосов
/ 02 января 2019

Вы не получите измененное значение состояния в следующей строке.Мы можем использовать метод обратного вызова здесь 

handleMonthChange_next = () => {
this.setState({
    currentMonth: this.state.currentMonth + 1
}, () => {
 this.props.getCalendarData(this.state.currentMonth)
})}
...