在 redux 的 React 16 中替换 componentWillRecieiveProps？

Question

说我有这个 reducer 将我的工作状态从 'pending' 更改为 'approve',

如何在不使用将被弃用的情况下处理它componentWillRecieiveProps？

我曾经这样做过

componentWillRecieiveProps(prevProps, nextProps) {
  if (prevProps.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
    this.props.history.replace('somewhere')
  }
}

Answer 1

@Shishir Anshuman 的评论是正确的，你应该使用 getDerivedStateFromProps，但如何使用并不是很明显，所以我将向你展示。

这是您比较 prevProps 和 nextProps 的原始代码段：

componentWillRecieiveProps(prevProps, nextProps) {
  if (prevProps.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
    this.props.history.replace('somewhere')
  }
}

它应该是这样的：

static getDerivedStateFromProps(nextProps, prevState) {
  if (prevState.job.status !== nextProps.job.status && nextProps.job.state === 'approved') {
    // return new object to update state
  }
  return null;
}

这是基于您将 job.status 存储在本地状态的假设，因此您的组件的构造需要如下所示：

constructor(props) {
  super(props);

  this.state = {
    job: props.job,
  };
}

虽然我没有完全了解你的数据结构，但我可能会将 job.status 作为布尔值存储在本地状态中，称为 jobStatus，然后只询问 this.props.job 中的对象当 this.state.jobStatus 为真时我的渲染。

如果您这样做，那么您的 getDerivedStateFromProps 将如下所示：

static getDerivedStateFromProps(nextProps, prevState) {
  if (prevState.jobStatus !== nextProps.job.status && nextProps.job.state === 'approved') {
    // return new object to update state
  }
  return null;
}

编辑 1

正如@Patrick Hund 在评论中指出的那样，我在 getDerivedStateFromProps 方法之前错过了 static 关键字，这是必需的。

编辑 2

正如@markerikson 在下面的评论中正确指出的那样 getDerivedStateFromProps 应该是一个纯函数并且没有副作用，我更新了代码片段以反映这一点。

这是我没有完全理解的文档中的重要句子：

It should return an object to update state, or null to indicate that 
the new props do not require any state updates.

在 redux 的 React 16 中替换 componentWillRecieiveProps？

replace componentWillRecieiveProps in react 16 in redux?

javascript

reactjs

redux

react-16