Вход в Google не работает должным образом на ComponentDidMount

Question

  componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client
        .init({
          clientId:
            process.env.REACT_APP_CLIENT_ID,
          scope: "email"
        })
        .then(() => {
          this.auth = window.gapi.auth2.getAuthInstance();
          this.onAuthChange(this.auth.isSignedIn.get());
          this.auth.isSignedIn.listen(this.onAuthChange);
        });
    });
  }

  // this function will called when auth status changes, according to gapi
  onAuthChange = isSignedIn => {
    if (isSignedIn) {
      this.props.signIn();
    } else {
      this.props.signOut();
    }
  };

когда страница загружается в первый раз, в зависимости от текущего состояния авторизации gapi, я менял состояние через хранилище избыточностей. но это не изменило состояние. Это всегда относится к начальному состоянию, которое я жестко запрограммировал на ноль.

Answer 1

Проверьте в onAuthChange, является ли значение 'isSignedIn' истинным после сетевого вызова (с использованием console.log (isSignedIn). Похоже, что вы можете получить значение слишком рано после установки состояния в Redux. Вы можете использовать здесь componentDidUpdate.

  componentDidMount() {
    window.gapi.load("client:auth2", () => {
      window.gapi.client
        .init({
          clientId:
            process.env.REACT_APP_CLIENT_ID,
          scope: "email"
        })
        .then(() => {
          this.auth = window.gapi.auth2.getAuthInstance();
        });
    });
  }

componentDidUpdate(prevProps) {
  //you should be importing the isSignedIn into props then you will be able
  //to use componentDidUpdate, it will not work otherwise
  if (prevProps.isSignedIn !== this.props.isSignedIn) {
    this.onAuthChange(this.props.isSignedIn);
  }
}


  // this function will called when auth status changes, according to gapi
  onAuthChange = isSignedIn => {
    if (isSignedIn) {
      this.props.signIn();
    } else {
      this.props.signOut();
    }
  };