Question

尝试创建登录并使用 react 和 firebase 注册并得到错误 setEmail is not a function 在尝试填写电子邮件的输入时，如果我尝试填写密码输入，我会收到相同的错误但是对于 setPassword setPassword 不是函数 App.js

这是我的 app.js

import React, {useState, useEffect} from 'react';
import './App.css';
import './Components/Feed/styles/_properties.scss'
import Home from './Pages';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import SignInPage from './Pages/signin';
import SignUpPage from './Pages/signup';
import Feed from './Pages/feed';
import fire from './fire';

function 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('');
      
      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 (
    <Router>
      <Switch>
        {user ? (
          <Home handleLogout={handleLogin}/>

        ):(
          <SignInPage email={email}
           setEmail={setEmail}
           emailError ={emailError}
           setEmailError ={setEmailError}
            password={password}
             setPassword={setPassword}
              handleLogin={handleLogin}
               handleSignUp={handleSignUp}
                hasAccount={hasAccount}
                 setHasAccount={setHasAccount}
                  passwordError={passwordError}/>

        )}
        
        
        <Route path='/signup' component={SignUpPage} exact />
        <Route path = '/feed' component={Feed} exact />
        

      </Switch>
    </Router>
   
  );
}

export default App;

这是我的 Signin.js

import React from 'react';
import './SigninElements.css'
const SignIn = (props) => {
    const {
        email,
        setEmail,
        password,
        setPassword,
        handleSignIn,
        handleSignup,
        hasAccount,
        setHasAccount,
        emailError,
        passwordError
    } = props;
    return (
        <section className='signin'>
            <div className='signinContainer'>
                <label>Username or Email</label>
                <input
                    type='text'
                    outoFocus
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                <p className='errorMsg'>{emailError}</p>
                <label>Password</label>
                <input
                    type='password'
                    required
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
                <p className='errorMsg'>{passwordError}</p>
                <div className='btnContainer'>
                    {hasAccount ? (
                        <>
                            <button onClick={handleSignIn}> Sign In</button>
                            <p>  Don't have an account ? <span onclick={() => setHasAccount(!hasAccount)}>Sign up</span></p>
                        </>

                    ) : (
                            <>
                                <button onClick={handleSignup}> Sign In</button>
                                <p> Have an account ? <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span></p>
                            </>

                        )}

                </div>

            </div>

        </section>

    )

}


export default SignIn;

我搜索了可能是什么问题，但我不知道。我想这可能是我调用道具的方式。我可能错了哈哈。我真的很感激任何帮助。

Answer 1

因为您将 setEmail 道具用作函数，但没有以这种方式传递。这就是您收到该错误的原因。请按以下方式尝试。

<SignInPage setEmail={setEmail} .../>

并在 SignInPage 中将代码更改为

 onChange={handleChange}

const handleChange = (e) => {
  props.setEmail(e.target.value);
}

或

onChange={(e) => props.setEmail(e.target.value)}

TypeError setEmail 不是函数

1 个答案: