2

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

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

我曾经这样做

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

1 回答 1

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本地状态存储为 boolean called ，然后仅在为 true时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方法之前的静态关键字，这是必需的。

编辑 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.
于 2018-04-23T14:34:10.583 回答