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

Question

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

在下面的代码示例中，子组件(Dashboard)中的 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 是异步的，因此上下文将异步提供给消费者。

如果 child 有必要等待上下文，他们应该有条件地呈现:

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

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

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