Question

尝试创建登录并注册 react 和 firebase 并在尝试填写电子邮件输入时收到错误 setEmail is not a function，如果我尝试填写密码输入，我得到了同样的错误，但对于 setPassword setPassword is not a function 应用程序

import React, { useState, useEffect } from "react";
import fire from './fire';
import LogIn from './LogIn';
import Hero from './Hero';
import './App.css';

const App = () => {
  const {user, setUser} = useState('');
  const {email, setEmail} = useState('');
  const {password, setPassword} = useState('');
  const {emailError, setEmailError} = useState('');
  const {passwordError, setPasswordError} = useState('');
  const {hasAccount, setHasAccount} = useState(false);

const clearInputs = () => {
  setEmail('');
  setPassword('');
}

const clearErrors = () => {
  setEmailError('');
  setPasswordError('');
}

const handleLogin = () => {
  clearErrors();
  fire
    .auth()
    .signInWithEmailAndPassword(email, password)
    .catch((err) => {
      switch(err.code){
        case "auth/invalid-email":
        case "auth/user-disabled":
        case "auth/user-not-found":
          setEmailError(err.message);
          break;
        case "auth/wrong-password":
          setPasswordError(err.message);
          break;
      }
    });
};

const handleSignup = () => {
  clearErrors();
  fire
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .catch((err) => {
      switch(err.code){
        case "auth/email-already-in-use":
        case "auth/invalid-email":
          setEmailError(err.message);
          break;
        case "auth/weak-password":
          setPasswordError(err.message);
          break;
      }
    });
}

const handleLogout = () => {
  fire.auth().signOut();
};

const authListener = () => {
  fire.auth().onAuthStateChanged((user) => {
    if (user) {
      clearInputs();
      setUser(user);
    } else {
      setUser("");
    }
  });
};

useEffect(() =>{
  authListener();
}, [])

  return (
    <div className="App">
      {user ? (
        <Hero handleLogout={handleLogout} />
      ) : (
      <LogIn 
        email={email} 
        setEmail={setEmail} 
        password={password} 
        setPassword={setPassword} 
        handleLogin={handleLogin}
        handleSignup={handleSignup}
        hasAccount={hasAccount}
        setHasAccount={setHasAccount}
        emailError={emailError}
        passwordError={passwordError}
      />
      )
    }
    </div>
  );
};

export default App;

和 LogIn.js 的代码

import React from 'react';

const LogIn = (props) => {

    const {
    email,
    setEmail, 
    password,
    setPassword,
    handleLogin,
    handleSignup,
    hasAccount,
    setHasAccount,
    emailError,
    passwordError
    } = props;

    return(
        <section className="login">
            <div className="loginContainer">
                <label>Username</label>
                <input type="text" 
                    autoFocus 
                    required 
                    value={email}
                    onChange={(e) => setEmail(e.target.value)} 
                />
                <p className="errorMsg">{emailError}</p>
                <label>Password</label>
                <input type="password" 
                    autoFocus 
                    required 
                    value={password} 
                    onChange={(e) => setPassword(e.target.value)} 
                />
                <p className="errorMsg">{passwordError}</p>
                <div className="btnContainer">
                    {hasAccount ? (
                        <>
                        <button onClick={handleLogin}>Sign In</button>
                        <p>Don't have an account? <span onClick={() => setHasAccount(!hasAccount)}>Sign UP</span></p>
                        </>
                    ) : (
                        <>
                        <button onClick={handleSignup}>Sign Up</button>
                        <p>Already Have an account? <span onClick={() => setHasAccount(!hasAccount)}>Sign In</span></p>
                        </>
                    )}
                </div>
            </div>
        </section>
    )
}
export default LogIn;

我已经尝试过针对我在此处找到的相同问题的解决方案，但对我不起作用，因为代码略有不同。我只是在学习 React，所以答案可能很明显。

Answer 1

你应该改变这个：

const {email, setEmail} = useState('');

为此：

const [email, setEmail] = useState('');

对 useState 钩子中的每个状态声明执行此操作，因为它返回一个数组而不是对象

Answer 2

useState 返回一个二元素元组，而不是一个对象，所以你的代码应该是：

const [email, setEmail] = useState('');

（所有其他 useState 调用相同）

类型错误：setEmail 不是 onChange 函数

2 个答案: