类型错误：setEmail 不是函数 - 函数 onChange

Question

每次我在输入中插入一个字符时，我的“onChange”函数都会出现问题，出现以下错误：当我尝试填写电子邮件条目时，setEmail 不是一个函数，如果我尝试填写输入密码，我得到同样的错误，但对于 setPassword setPassword 不是函数

  26 | required
  27 | placeholder="Enter your email address"
  28 | value={email}
> 29 | onChange={(e) => setEmail(e.target.value)}
     | ^  30 | />
  31 | <p className="errorMsg">{emailError}</p>
  32 | <label>Password</label>

在我的 SignUp.js 中

import React from 'react';
import App from '../../../App'

const SignUp = (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
                placeholder="Enter your email address"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                />
                <p className="errorMsg">{emailError}</p>
                <label>Password</label>
                <input
                type="password"
                required
                placeholder="Enter your password"
                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>Have an account ? 
                        <span onClick={() => setHasAccount(hasAccount)}>Sign in</span></p>
                        </>
                    )}
                </div>
            </div>
        </section>
    );
};

export default SignUp;

在我的 APP.js 中：

import React, {useState, useEffect} from 'react';
import Navbar from './components/Navbar';
import fire from './components/fire'
import {BrowserRouter as Router, Switch, Route} from 
'react-router-dom';
import './App.css';

import Home from './components/pages/Home';
import AboutUs from './components/pages/AboutUs';
import SignUp from './components/pages/auth/SignUp';
import InterVolunteer from './components/pages/InterVolunteer';

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 (
    <>
    <Router>
      <Navbar/>
      <Switch>
        <Route path='/' exact component= {Home}/>
        <Route path='/intervolunteer' exact component= {InterVolunteer}/>
        <Route path='/about' exact component= {AboutUs}/>
        <Route 
        email = {email}
        setEmail = {setEmail}
        password = {password}
        setPassword = {setPassword}
        handleLogin = {handleLogin}
        handleSignup = {handleSignup}
        hasAccount = {hasAccount}
        setHasAccount = {setHasAccount}
        emailError = {emailError}
        passwordError = {passwordError}
        path='/sign-up' 
        exact component= {SignUp}/>
      </Switch>
    </Router>
    </>
  );
}


export default App;