存在带有 React 编译错误标识符的 Firebase

Question

首先，感谢您阅读本文。

我正在逐步学习如何使用 react 实现 firebase 的教程。我的代码与教程完全匹配，该教程正在制作教程作者的视频。此外，一个名为 signup.js 的类似函数的结构完全相同，不会引发编译器错误。我实际上使用了 signup.js 文件来构建 login.js 文件，只有更新以反映不同的文件。

这是编译器中的错误吗？ 还是我的代码中的某些东西实际上导致了这种情况？

我会给解决问题的人买一个披萨。谢谢！

编译器错误

    Failed to compile.
    ./src/pages/Login.js
  Line 6:5:  Parsing error: Identifier 'login' has already been declared

  4 | import { Link } from 'react-router-dom';
  5 | 
> 6 | var login(props) {
    |     ^
  7 |   const { register, handleSubmit, reset } = useForm();
  8 |   const [isLoading, setLoading] = useState(false);

我有两个相关文件，auth.js 和 login.js。

auth.js 是：

import firebase from 'firebase/app';
import 'firebase/auth';

export const signup = async ({ firstName, lastName, email, password }) => {
  const resp = await firebase.auth().createUserWithEmailAndPassword(email, password);
  const user = resp.user;
  await user.updateProfile({ displayName: `${firstName} ${lastName}`});
  return user;}


export const logout = () => {
  return firebase.auth().signOut();
};

export const login =  async ({ email, password }) => {
  const resp = await firebase
    .auth()
    .signInWithEmailAndPassword(email, password);

  return resp.user;
};

而 login.js 是：

import { useForm } from 'react-hook-form';
import { login } from '../firebase/auth';
import { Link } from 'react-router-dom';

function login(props) {
  const { register, handleSubmit, reset } = useForm();
  const [isLoading, setLoading] = useState(false);

  const onSubmit = async (data) => {
    let User;
    setLoading(true);
    try {
      User = await signup(data);
      reset();
    } catch(error) {
      console.log(error);
    }

    if (User) {
      props.history.push(`/profile/${User.uid}`);
    } else {
      setLoading(false);
    }
  };

  const formClassName = `ui form ${isLoading ? 'loading' : ''}`;

  return (
    <div className="login-container">
      <div className="ui card login-card">
        <div className="content">
          <form className={formClassName} onSubmit={handleSubmit(onSubmit)}>
            <div className="field">
              <label>
                Email
                <input
                  type="email"
                  name="email"
                  placeholder="Email"
                  ref={register}
                />
              </label>
            </div>
            <div className="field">
              <label>
                Password
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  ref={register}
                />
              </label>
            </div>
            <div className="field actions">
              <button className="ui primary button login" type="submit">
                Login
              </button>
              or
              <Link to="/signup">Sign Up</Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Login;

正在运行的 signup.js 文件向您展示它们的相似程度：

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { signup } from '../firebase/auth';
import { Link } from "react-router-dom";


function Signup(props) {
  const { register, handleSubmit, reset } = useForm();
  const [isLoading, setLoading] = useState(false);

  const onSubmit = async (data) => {
    let newUser;
    setLoading(true);
    try {
      newUser = await signup(data);
      reset();
    } catch(error) {
      console.log(error);
    }

    if (newUser) {
      props.history.push(`/profile/${newUser.uid}`);
    } else {
      setLoading(false);
    }
  }

  const formClassName = `ui form ${isLoading ? 'loading' : ''}`;

  return (
    <div className="login-container">
      <div className="ui card login-card">
        <div className="content">
          <form className={formClassName} onSubmit={handleSubmit(onSubmit)}>
            <div className="two fields">
              <div className="field" >
                <label>
                  First Name
                  <input
                    type="text"
                    name="firstName"
                    placeholder="First Name"
                    ref={register}
                  />
                </label>
              </div>
              <div className="field">
                <label>
                  Last Name
                  <input
                    type="text"
                    name="lastName"
                    placeholder="Last Name"
                    ref={register}
                  />
                </label>
              </div>
            </div>
            <div className="field">
              <label>
                Email
                <input
                  type="email"
                  name="email"
                  placeholder="Email"
                  ref={register}
                />
              </label>
            </div>
            <div className="field">
              <label>
                Password
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  ref={register}
                />
              </label>
            </div>
            <div className="field actions">
            <button className="ui primary button login" type="submit">
              Sign Up
            </button>
            or
            <Link to="/login">Login</Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Signup;

Answer 1

在 login.js 文件的顶部：

import { useForm } from 'react-hook-form';
import { login } from '../firebase/auth';
import { Link } from 'react-router-dom';

function login(props) {
...

您在第 2 行导入了一个名为 login 的函数，然后您尝试在第 5 行声明另一个名为 login 的函数。您必须重命名导入或重命名该函数。

Answer 2

老兄，你声明了一个同名的变量和一个函数……你欠我一个披萨：P