1

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 prop 更改时都请求它自己的数据，但每次 id prop 更改时只请求一次。

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

bvaughn 在 github 上有一个很长的评论，但是它直接将数据存储在 state 中，并在数据为 null 时启动 refetch。但是，如果我将数据存储在 中redux，我不能只是将我的数据清空getDerivedStateFromProps（或者我可以吗？）。

有人可以解释我如何在“现代”中做同样的事情React吗？

4

1 回答 1

1

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

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

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

如果您需要执行副作用（例如，数据获取或动画）以响应道具的变化，请改用 componentDidUpdate 生命周期。

于 2018-08-17T13:04:43.350 回答