当使用“ this”时，如何从componentWillReceiveProps适当地迁移到getDerivedStateFromProps

Question

I am trying to migrate my apps to do the React v16.3.* API, and it has been quite difficult to get rid of componentWillReceiveProps . I have components which are dependent on it and call the components other function in them.

Because getDerivedStateFromProps is static, I can't easily do this anymore and I need help on how to appropriately. For this case in particular, I have a timeout function that resets whenever new props are received. It currently is as follows:

componentWillReceiveProps (nextProps) {
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    this.dismiss(null, nextProps)
  }, nextProps.timer)
}

As you can see I have this.timeout and this.dismiss which I cannot access anymore once the change is made to getDerivedStateFromProps . How to I deal with this? Is there a way to change this to be a getDerivedStateFromProps static function or do I have to go about this a completely different way?

Answer 1

As @Kyle mentions, this doesn't belong in getDerivedStateFromProps , but it might not be immediately obvious why you can safely do this in componentDidUpdate .

The reason you can is that you're only clearing and setting timers, which won't affect anything until after React has updated the DOM and finished executing. Hence, it makes no difference if you do this in the pre-render componentWillReceiveProps or the post-update componentDidUpdate :

componentDidUpdate()
  clearTimeout(this.timeout)
  this.timeout = setTimeout(() => {
    this.dismiss(null, this.props)
  }, this.props.timer)
}

The React blog has some example migrations that may prove helpful.