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

Question

How do I make sure I set a value in the context provider before components are mounted?

In the code example below, the console.log in the child component(Dashboard) will be logged first (as undefined). Why is that and is there any way for me to make sure the value is set before that component is mounted?

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);
}

Answer 1

Children are rendered first. Regardless of that, setState is asynchronous, so a context will be provided to consumers asynchronously.

In case there's a necessity for children to wait for a context, they should be either conditionally rendered:

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

Or be wrapped with context consumer which can be written as a HOC for reuse:

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