React 上下文提供程序是否未安装在子组件之前？答案

【问题标题】：Is React context provider not mounted before child components?React 上下文提供程序是否未安装在子组件之前？
【发布时间】：2019-09-06 12:30:40
【问题描述】：

如何确保在安装组件之前在上下文提供程序中设置了一个值？

在下面的代码示例中，子组件（仪表板）中的 console.log 将首先被记录（未定义）。为什么会这样？我有什么方法可以确保在安装该组件之前设置该值？

App.js

render() {
  return (
    <div className='App'>
      <ContextProvider>
        <Dashboard />
      </ContextProvider>
    </div>
  );
}

ContextProvider.js

componentDidMount = () => {
  this.setState({value: 1})
  console.log(this.state.value);
}

Dashboard.js

componentDidMount = () => {
  console.log(this.context.value);
}

【问题讨论】：

这不是特定于上下文提供者的。您将从任何父/子关系中获得相同的行为。
@estus 感谢您的快速响应。那么子组件的componentDidMount函数总是在父组件之前调用？就我而言，我想根据所有组件使用的全局状态（上下文）中的 url 来抢占市场。你知道如何做到这一点吗？我现在才意识到一个变通办法，也就是说，我实际上是从每个需要它的组件中的 url 中抢占市场。不过感觉很没必要。
是的。特别是因为您期望的值是在安装组件后异步设置的。 setState 是异步的。你描述的是上下文的用途。

【解决方案1】：

首先渲染子级。不管怎样，setState 是异步的，因此会异步向消费者提供上下文。

如果孩子需要等待上下文，则应该有条件地渲染它们：

render() {
  this.context.value && ...
}

或者使用上下文消费者进行包装，可以将其编写为 HOC 以供重用：

const withFoo = Comp => props => (
  <FooContext.Consumer>{foo => foo.value && <Comp {...props}/>}</FooContext.Consumer>
);

【讨论】：