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

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

当组件由于可观察项的更改而将更新时，您可以改为使用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>
    );
  }
})

Answer 2

您可以只在componentDidUpdate（）中更改if语句：

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

this.props和prevProps相等

2 个答案: