AWS Amplify HOC Authenticator React 不会将 authState 属性 传递给包装组件

Question

我正在尝试使用 Amplify Authenticator 在用户未登录时阻止对我的应用程序的访问。

 <Authenticator includeGreetings={true}>
            <Provider store={dataStore}>
                <Router history={hist}>
                    <MyView>
                    </MyView>
                </Router>
            </Provider>
        </Authenticator>

在渲染方法中的组件 MyView 中，我试图通过以下方式进行简单的身份验证检查：

if (this.props.authState !== 'signedIn') {
            return (<></>);
        }

但由于某种原因，在检查if条件中的auth状态时，它是未定义的。

1. 为什么 属性 未定义 - 我在文档中了解到它正在向下传送到所有子组件。

   2. 我的做法正确吗？我在文档中看到您可以实现一个方法 showComponent(theme) 并且身份验证器只会在用户处于特定状态时调用它 但是我需要在调用此方法时为身份验证器设置正确的状态 经过 this._validAuthStates = ['signedIn'];

但我不知道在哪里调用该方法，我在任何地方都无法访问它。

我们将不胜感激。

Answer 1

我不是专家，但我遇到了这个问题，并以您似乎遇到的方式与医生作斗争。

我偶然发现了一个解决方案

在索引中，我以这种方式呈现我的组件

    <Provider store={store}>
      <Authenticator
          hide={[SignUp, SignIn, Greetings]}
      >
        <CustomGreetings/>
        <CustomSignUp/>
        <CustomSignIn/>
        <App/>
      </Authenticator>
    </Provider>

在我的应用程序组件中，我现在可以访问 authState。所以我在其他组件中重新注入它：

return(
  <Router>
    <NavbarComponent/>
    <Switch>
      <Route path="/dashboard">
        <DashboardContainer authState={this.props.authState}/>
      </Route>
      <Route path="/admin">
        <AdminComponent authState={this.props.authState}/>
      </Route>
    </Switch>
  </Router>
);

我不知道这是否是解决方案，但好吧，对我来说它有效