在 React + Redux 中使用新的生命周期方法通过更改 id 获取数据

Question

我在 React <= 16.2 中这样做过：

componentDidMount () {
  fetchData(this.props.id)
}

componentWillReceiveProps(nextProps) {
  if (this.props.id !== nextProps.id) {
    fetchData(nextProps.id)
  }
}

render() {
  if (this.props.isLoading) {
    return <Loader />
  } else {
    return <SuperComp this.props.data />
  }
}

组件已连接，fetchData 是一个 redux-thunk 动作创建者，管理一个简单状态：{ isLoading: ..., data }。我们可以在后续请求中添加错误处理和取消，但这超出了现在的范围。

其基础是组件每次更改 id 属性时都请求它自己的数据，但每次更改 id 属性时只请求一次。

我不知道它在 React 16.4 中是如何正确完成的，getDerivedStateFromProps 是一个返回新状态的静态同步东西。

bvaughn 在 github 上有一个 long comment，但它直接将数据存储在状态中，并在数据为空时启动重新获取。但是，如果我将数据存储在 redux 中，我就不能将 getDerivedStateFromProps 中的数据置零（我可以吗？）。

谁能解释一下我如何在 "modern" React 中做同样的事情？

Answer 1

为什么不为此目的使用 componentDidUpdate（顺便说一句，官方文档中的示例也表明了这一点）。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    fetchData(this.props.id);
  }
}

getDerivedStateFromProps 怎么样 - 他们还警告更简单的替代方案：

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.

在 React + Redux 中使用新的生命周期方法通过更改 id 获取数据

Using new lifecycle methods for fetching data by a changing id in React + Redux

javascript

reactjs

redux

react-lifecycle