this.props и prevProps равны

Question

Внутри componentDidUpdate предупреждение не срабатывает при смене реквизита.

Вы можете запустить этот код в codePen (https://codepen.io/anon/pen/BMmqKe?editors=1011)

const state = observable({
  isOpen: false
})

state.close = function () {
  state.isOpen = false
}

state.open = function () {
  state.isOpen = true
}

const Home = observer(class home extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.store.isOpen !== prevProps.store.isOpen) {
      // this line is not executed
      alert('reset');
    }
  }

  render() {
    return (
      this.props.store.isOpen
      ? <button onClick={this.props.store.close}>close</button>
      : <button onClick={this.props.store.open}>open</button>
    );
  }
})

render(<Home store={state} />, document.getElementById('app'))

Answer 1

Вы можете просто изменить оператор if в вашем componentDidUpdate ():

!this.props.store.isOpen ? alert("reset"): null;

Answer 2

this.props.store и prevProps.store всегда будут ссылаться на один и тот же объект store, поэтому isOpen всегда будет одинаковым с обеих сторон оператора равенства.

Вместо этого можно использовать componentWillReact ловушка жизненного цикла для запуска некоторого кода при обновлении компонента из-за изменения наблюдаемой.

const Home = observer(class home extends Component {
  componentWillReact() {
    alert('reset');
  }

  render() {
    return (
      this.props.store.isOpen
      ? <button onClick={this.props.store.close}>close</button>
      : <button onClick={this.props.store.open}>open</button>
    );
  }
})