web-dev-qa-db-ja.com

AWS Amplify-サインイン後にコンポーネントをレンダリングする方法

Reactを使用したAWS Amplifyアプリがあります。ユーザーが正常にサインインした場合にのみ、TaskListコンポーネントをロード（または再ロード）できるようにしたいのですが、ページがロードされ、ユーザーがフォームに入力して取得すると、コンポーネントは最初からレンダリングされますサインアップするとリロードされません。複数の回避策を試してみましたが、コンポーネントを成功したログインに依存させる方法がわかりません。デフォルトのAmplifyオーセンティケーター機能を使用して、ユーザーをCognitoにサインインさせます。

const App = () => (
  <AmplifyAuthenticator>
    <div>
      My App
      <AmplifySignOut />
      <TaskList />
    </div>
  </AmplifyAuthenticator>
);
reactjsaws-amplifyamplifyjs
2
jbernal

これは、私が州を管理するために同様の問題を解決した方法です。あとでイベントが出ないようで困っていました。

https://github.com/aws-amplify/amplify-js/issues/5825 から

import React from 'react';

import {  AmplifyAuthenticator, AmplifySignOut, AmplifySignUp, AmplifySignIn} from '@aws-amplify/ui-react';
import { onAuthUIStateChange } from '@aws-amplify/ui-components'


const Panel = () => {

    const [setAuthState] = React.useState();

    React.useEffect(() => {
        return onAuthUIStateChange(newAuthState => {
            if(newAuthState === 'signedin'){
                // Do your stuff
            }
            setAuthState(newAuthState)
        });
    }, []);


    return(
            <AmplifyAuthenticator>
                <AmplifySignIn headerText="Sign In" slot="sign-in"/>
                <AmplifySignUp slot="sign-up" formFields={[
                    {type: 'username'},
                    {type: 'email'},
                    {type: 'password'}
                ]}></AmplifySignUp>

                <AmplifySignOut></AmplifySignOut>
            </AmplifyAuthenticator>
    )

}

export default Panel;
0
joseprupi