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

Question

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

在下面的代码示例中，子组件（仪表板）中的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);
}

Answer 1

首先渲染儿童。无论如何，setState是异步的，因此将异步地向使用者提供上下文。

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

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

或用上下文使用者包装，可以将其用作HOC编写以供重用：

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