Блог

Главная - Вопросы по программированию - Всплывающее окно аутентификации Google не работает для приложения React 17; Получение предупреждения о реакции — это причина или как исправить?

Всплывающее окно аутентификации Google не работает для приложения React 17; Получение предупреждения о реакции — это причина или как исправить?

#javascript #reactjs #firebase #function

#javascript #reactjs #firebase #функция

Вопрос:

Как показано в описании, я работаю над проектом React и использую Firebase для аутентификации, а всплывающее окно не запускается, но я думаю, что это может быть связано с этим предупреждением от React. Предупреждение, которое я получаю от React, заключается в том, что предупреждение: ожидаемый onClick слушатель должен быть функцией, вместо этого получил значение object типа. Я изучал это и пытался решить проблему в течение 2 дней. Любые указатели будут с благодарностью приняты 🙂 Спасибо!!

Вот мой код утилиты Firebase для аутентификации:

 const config = {
  My config info
};

firebase.initializeApp(config);



const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
export const signInWithGoogle = () => auth.signInWithPopup(provider)
.then(function (result) {
}).catch(error => {
  console.log(error);
})



export default firebase;

Теперь мой пользовательский компонент кнопки в React 17

 import React from 'react';
import './custom-button.styles.scss';

const CustomButton = ({children, isGoogleSignIn, ...otherProps}) => (
    <button
      className={`${isGoogleSignIn ? 'google-sign-in' : ''} custom-button`}
      {...otherProps}>
        {children}
    </button>
);

export default CustomButton;

Наконец, мой компонент входа в React

 lass SignIn extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: ''
        }
    }

    handleSubmit = event => {
        event.preventDefault();

        this.setState({ email: '', password: '' })
    }

    handleChange = event => {
        const { value, name } = event.target;

        this.setState({ [name]: value })
    }

    render() {
        return (
        <div className='sign-in'>
            <h2>I already have an account</h2>
            <span>Sign in with your email and password</span>

        <form onSubmit={this.handleSubmit}>
          <FormInput
            name='email'
            type='email'
            handleChange={this.handleChange}
            value={this.state.email}
            label='email'
            required
          />
          <FormInput
            name='password'
            type='password'
            value={this.state.password}
            handleChange={this.handleChange}
            label='password'
            required
          />
          <div className='buttons'>
            <CustomButton type='submit'> Sign in </CustomButton>
            <CustomButton onClick={signInWithGoogle} isGoogleSignIn>
                Sign in with Google
            </CustomButton>
          </div>
        </form>
      </div>
    );
  }
}



export default SignIn;

Ответ №1:

Я наконец понял это. Файл конфигурации firebase должен был иметь .затем и .catch для обещания. Как только я добавил это, теперь все работает нормально. Я исследовал 3 дня, чтобы разобраться в этом. Прохождение курса, и парень, который создал этот курс, не добавил это, хотя это было два года назад, возможно, тогда это не требовалось, но сейчас.