this.props 和 prevProps 是相等的答案

【问题标题】：this.props and prevProps are equalthis.props 和 prevProps 是相等的
【发布时间】：2019-02-07 17:52:40
【问题描述】：

在componentDidUpdate内部，props改变时不会触发alert。

您可以在 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'))

【问题讨论】：

任何答案对您有用吗？如果是这种情况，请考虑 accepting one of them。

标签： reactjs mobx mobx-react

【解决方案1】：

this.props.store 和 prevProps.store 将始终引用同一个 store 对象，因此 isOpen 在等号运算符的两侧将始终相同。

您可以改用componentWillReact life cycle hook 来运行一些代码，当组件由于可观察对象发生变化而更新时。

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

【讨论】：

【解决方案2】：

您可以只更改您 componentDidUpdate() 中的 if 语句：

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

【讨论】：