Question

我说这个减速器将我的工作状态从“待定”改为“批准”，

如何使用它而不使用将被弃用的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？

1 个答案: