Question

Context提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递道具。太好了！

但是我想知道如何与getDerivedFromProps（）一起使用它

例如，如果我在应用程序的顶层有一个通过Context发送的道具，说它是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的任何信息吗？

谢谢。

Answer 1

如果要在生命周期方法中使用上下文，则可以使用contextType。这种方法的问题在于{ "code": 500, "status": "failure", "path": "/api/echo", "message": "com.microsoft.aad.adal4j.AuthenticationException: {\"error_description\":\"AADSTS500131: Assertion audience does not match the Client app presenting the assertion. The audience in the assertion was '48eb1c7f-e02b-43a9-913a-XXXXXXXX' and the expected audience is 'a3edefea-1ff3-43ed-b2d7-=XXXXXXXXXXXXX' or one of the Application Uris of this application with App ID 'a3edefea-1ff3-43ed-b2d7-=XXXXXXXXXX'(PulseBE).\\r\\nTrace ID: 2aced69c-f12d-4b5d-97db-XXXXXXXXXX\\r\\nCorrelation ID: 226816c8-a2ed-488c-86ec-XXXXXXXXXXXXXXXX\\r\\nTimestamp: 2019-06-17 19:10:34Z\",\"error\":\"invalid_grant\",\"error_uri\":\"https:\\/\\/login.microsoftonline.com\\/error?code=500131\"}", "timeStamp": "Tue Jun 18 00:40:35 IST 2019", "trace": null }是静态的，无法访问实例变量。

所以我看到的解决方案是像这样将您的组件包装在高阶组件中

getDerivedStateFromProps

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

Answer 2

getDerivedFromProps不适合

DOCS-getDerivedFromProps的提示：“如果您需要响应道具的更改而产生副作用（例如，数据获取或动画），请改用componentDidUpdate生命周期。”

也“此方法无权访问组件实例。” -那么没有this.context可用。

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

如何在getDerivedStateFromProps中使用React上下文API？

2 个答案: