Блог

Я работаю над проектом React, для которого требуется авторизация через AWS Cognito. Следуя документации, я могу успешно получить идентификационный токен. Однако я не знаю, как обновить состояние в обратном вызове onsuccess, вот мой код. Ценю вашу помощь.

     class A extends Component{
        constructor(){
             super();
             this.state = {
                 auth: "";
                 token: "";
                 login:false;
            }
        }
    }
    hanleSignIn = ()=>{
       let auth = this.initCognitoSDK();
        let curUrl = window.location.href;
        auth.parseCognitoWebResponse(curUrl);
        auth.getSession();
    }
    initCognitoSDK=()=>{
    let authData = {
        ClientId: // client id 
        AppWebDomain:  // "https://" part.
        TokenScopesArray:  // like ['openid','email','phone']...
        RedirectUriSignIn: 'http://localhost:3000',
        RedirectUriSignOut: 'http://localhost:3000',
        IdentityProvider: **,
        UserPoolId: **,
        AdvancedSecurityDataCollectionFlag: false  
    };
    let auth = new CognitoAuth(authData);
    auth.userhandler = {
        onSuccess: function (result) {
            if(result){
                let idToken = result.getIdToken().getJwtToken();
                //here I want to update the following state once get token successfully
                // However I can't reach this.setState in the callback function
                this.setState({
                    auth: auth,
                    token: idToken,
                    login: true
                })
            }
        },
        onFailure: function (err) {
            console.log("Error!"   err);
        }
    };
    auth.useCodeGrantFlow();
    return auth;
}

   
 

Вы используете обычную функцию для своего обратного вызова, что означает, что при вызове обратного вызова контекст this is auth.userhandler не имеет setState свойства. Как и в других частях вашего кода, вы должны использовать обозначение функции со стрелкой, чтобы она использовала лексический this , который является экземпляром вашего компонента:

 auth.userhandler = {
  onSuccess: (result) => {
    ...
    this.setState({ ... });
  }
};