3

最近有消息说 React 很快就会被弃用componentWillReceiveProps，取而代之的是新的静态函数getDerivedStateFromProps。在这里查看更多

我目前正在将我的应用程序迁移到这个新的 API，但是getDerivedStateFromProps由于我正在使用 recompose 库来处理高阶组件，因此遇到了问题。我们componentWillReceive通过库的生命周期对象来使用道具。

所以在迁移到新的 API 之前，我有这个：

export function someHoC () {
  return compose(
    lifecycle({
      componentWillReceiveProps (nextProps) {
        const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

现在已更改为以下内容：

export function someHoC () {
  return compose(
    lifecycle({
      getDerivedStateFromProps (nextProps) {
          const { fetch } = nextProps
          if (shouldFetch(this.props, nextProps)) {
             fetch()
          }
      }
    })
  )
}

但是，getDerivedStateFromProps需要是静态的，所以我收到了关于这个的警告，不知道如何处理它。

warning.js?7f205b4:33 警告：生命周期（MyComponent）：getDerivedStateFromProps() 被定义为实例方法，将被忽略。相反，将其声明为静态方法。

我该怎么做才能将它作为静态生命周期方法传递到我的组件中？

4

2 回答 2

5

如果要使用getDerivedStateFromProps，需要将其声明为静态方法： 

static getDerivedStateFromProps() {...}

显然，这使得getDerivedStateFromProps静态，这意味着你不能像你可以调用它一样调用它componentWillReceiveProps。

如果静态方法对您不起作用，您可以将逻辑移入componentDidUpdate以使警告静音。setState()但是，如果您从此方法调用，这可能会导致额外的渲染。根据您解决问题时发生的情况fetch()，这可能对您有用。

您也可以替换componentWillReceiveProps为UNSAFE_componentWillReceiveProps( docs )，其工作方式相同。但是，由于即将推出的异步渲染功能，这可能会导致一些问题。

于 2018-04-19T10:11:50.263 回答
0

您应该在生命周期中使用以下内容

setStatic('getDerivedStateFromProps', (nextProps, prevState) => {}) 并将以前的值存储在组件状态中，以便从prevState参数 中检索它

于 2018-04-18T12:53:05.110 回答