如何在getDerivedStateFromProps中使用React Context API？

Question

Context提供了一种在组件树中传递数据的方式，而不必在每个级别手动传递props。这很好！

但我想知道如何与getDerivedFromProps()一起使用。

例如，如果我在应用程序的顶层通过Context发送一个prop，该prop是window.location.href，并且我需要根据href在子组件中执行操作，例如获取数据。

使用getDerivedStateFromProps()，我必须编写以下内容：

getDerivedStateFromProps(nextProps, state) {

  var stateRev = null
  var pathname = hrefToPath(nextProps.href)
  if (pathname != state.pathname) {
    stateRev = {}
    Object.assign(stateRev, {
      pathname,
      book: source.find()
    })
  }
  return stateRev
}

然而，如果我像上面那样编写代码，我必须通过层级发送window.location.href。我需要知道的是，如果上下文中的属性已更改，则需要更新状态。

我看不到任何了解上下文API和getDerivedStateFromProps的方式来知道上下文中的属性是否已更改。是否有什么需要知道的吗？

谢谢。

- Ben P.P. Tung

Answer 1

如果您想在生命周期方法中使用上下文，可以使用 contextType。这种方法的问题在于getDerivedStateFromProps是静态的，无法访问实例变量。

因此，我认为解决方案是将组件包装在高阶组件中，就像这样。

const WithContext = (Component) => {
    return (props) => (
        <CustomContext.Consumer>
            {value =>  <Component {...props} value={value} />}
        </CustomContext.Consumer>
    )
}

在这种情况下，您将获得上下文作为props的一部分。

- Fyodor Yemelyanenko

---

谢谢。看来这似乎是对上下文属性更改做出反应的唯一方法。 - Ben P.P. Tung

Answer 2

getDerivedFromProps 不适用于此

文档提示：getDerivedFromProps：'如果您需要响应 props 的更改执行副作用（例如，数据获取或动画），请改为使用 componentDidUpdate 生命周期。'

还有 '该方法无法访问组件实例。' - 因此没有 this.context 可用。

如果您需要对上下文 prop 更改做出反应 - 请使用 Context.Consumer。使用componentDidUpdate 来比较 props（consumer 提供上下文值作为 prop）并有条件地获取数据。

- xadm

---

嗨，xadm，很抱歉我不明白为什么不应该使用getDerivedStateFromProps，事实上，我想问的是当props改变时如何获取外部数据，链接在这里：https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change。然而，我正在考虑如何对上下文prop更改做出反应，所以我在问。 - Ben P.P. Tung

因为它是静态的 - 没有 this 访问，没有在获取后的 this.setState ...等。 - xadm