AWS Amplify - React Authenticator 组件不可见答案

【问题标题】：AWS Amplify - React Authenticator Components not visibleAWS Amplify - React Authenticator 组件不可见
【发布时间】：2019-04-08 10:11:09
【问题描述】：

使用 https://aws-amplify.github.io/media/ui_library 构建身份验证 UI

import { Authenticator } from 'aws-amplify-react'
import Amplify from 'aws-amplify';

Amplify.configure(aws_exports);

const AppWithAuth = () => (
 <Authenticator />
)

https://aws-amplify.github.io/docs/js/authentication#using-the-authenticator-component-directly

使用 React Developer Tools 进行检查，组件在 React View 中可见

但不在浏览器的 DOM 视图中

所以，Authenticator 的各种组件，如 Greetings 和 SignIn 并没有出现在 DOM 中。如何让它们在浏览器中可见

[Auth and AuthData state after logging in]4

[Console.logs]5

【问题讨论】：

嗨，Shorn Jacob！您是否设法解决了这个问题？

标签： reactjs aws-amplify

【解决方案1】：

组件基于authState 属性呈现UI 或不呈现任何内容。在您的情况下，authState 是signedIn。所以只有 Greetings 会渲染一些 UI。

【讨论】：

即使在 authState 已登录时也不会呈现 Greetings UI。
试试这个怎么样。在您的代码中添加 import Amplify, { Auth } from 'aws-amplify';从“./aws-exports”导入 aws_exports；放大。配置（aws_exports）； Auth.signOut() 这是为了确保您已退出。然后应该会出现登录表单。
试过这个。这会强制登录表单。但是一旦登录，就不会显示任何问候。
组件中好像只有authState，但没有authData，这会导致Greetings出错。你检查控制台日志了吗？有错误日志吗？
我添加了authData和console.log的截图

【解决方案2】：

Authenticator 的各种组件，如 Greetings 和 SignIn 未显示在 DOM 中。

看到您的authState 当前位于signedIn，您实际上已经登录。这就是<SignIn> 组件不可见/不呈现的原因。如果您想看到<SignIn> 组件工作，您的authState 应该是"signIn" 值，您可以尝试将其硬编码为初始状态以查看它的运行情况。

import React from "react";
import { Authenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const AppWithAuth = () => (
  <Authenticator
    // Optionally hard-code an initial state
    authState="signIn"
  />
);

至于<Greetings>，如果您的状态是signedIn，它应该会显示出来。您也可以尝试使用withAuthenticator 高阶组件。

import React from "react";
import { withAuthenticator } from "aws-amplify-react";
import Amplify from "aws-amplify";
import aws_exports from "./aws-exports";

Amplify.configure(aws_exports);

const App = () => {
  return (
    <div>
      <h1>Hello world!</h1>
      <p>This is your own App Component</p>
    </div>
  );
};

export default withAuthenticator(App, {
  // Render a sign out button once logged in
  includeGreetings: true
});

【讨论】：