reactjs - React Context提供不将值传递给消费者

Question

我有以下提供，其中包含身份验证状态。

export const AuthenticationContext = React.createContext();

export default class AuthenticationProvider extends React.Component {
  state = {
    isAuthenticated: false
  };

  render() {
    return (
      <AuthenticationContext.Provider value={{ state: this.state }}>
        {this.props.children}
      </AuthenticationContext.Provider>
    );
  }
}

我将其包装到我的路线中，如下所示：

     <Provider store={store}>
        <ConnectedRouter history={history}>
          <>
            <GlobalStyle />
            <AuthenticationProvider>
              <SiteHeader />
              <ErrorWrapper />
              <Switch>
                <PrivateHomeRoute exact path="/" component={Home} />
                <Route exact path="/login" component={LoginPage} 
              </Switch>
            </AuthenticationProvider>
          </>
        </ConnectedRouter>
      </Provider>

<SiteHeader />但是当我试图将上下文状态放入Context.Provide. 我的消费者在里面<SiteHeader />是：

class SiteHeader extends React.Component {
  render() {

    return (
      <div>
        <AuthenticationContext.Consumer>
          {context => (
            <header>this is header {context.state.isAuthenticated}</header>
          )}
        </AuthenticationContext.Consumer>
      </div>
    );
}

我检查了 React devtools，但它是一样的。Context.Consumer没有value来自Provider.

这里可能是什么问题？

标签： reactjsreact-context

Answer 1

如果值为 false、null 或未定义，则不会呈现。我在这里的沙箱中尝试了您的代码。只是在头中添加了 .toString() ，并且布尔值显示在头中。