TypeError: setEmail is not a function

Question

我的 reactjs 有问题。我无法打开登录。 setEmail 不起作用，setPassword 是相同的。我试图编辑并检查我的代码，但仍然出错。我应该怎么办？我已经运行了。但是当我创建我的用户名时出现错误。 here the error

here the codes for 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 htmlFor="">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"
                    requited
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                />

这里是 App.js App.js

import React, {useState, useEffect} from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
// import Login from '../Login';
import routes from "./routes";
import withTracker from "./withTracker";


import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

import './App.css';
import fireDb from './firebase/firebase';
import './App.css';
//Components
import Dashboard from "./views/Dashboard";
import Login from "./views/Login";



function App() {

  //States
  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('')
  }

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

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

  //Function for logout
  const handleLogout = () => {
    fireDb.auth().signOut();
  }

  //Authentication listener
  const authListener = () => {
    fireDb.auth().onAuthStateChanged(user => {
      if ( user ){
        clearInputs();
        setUser(user);
      } else { setUser('') }
    })
  }

  //React listener.
  useEffect(() => {
    authListener();
  },[]);

  return (
    <div className="App">
      { user ? (
        <Dashboard 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 () => (
  <Router basename={process.env.REACT_APP_BASENAME || ""}>
    <div>
{/*       
      <Dashboard/> */}
      {routes.map((route, index) => {
        return (
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={withTracker(props => {
              return (
                <route.layout {...props}>
                  <route.component {...props} />
                </route.layout>
              );
            })}
          />
        );
      })}
    </div>
  </Router>
);




// export default App;

[无法设置邮箱的错误][2]

Answer 1

这个问题是因为你的登录组件是直接加载的，没有任何道具。你应该通过 App 组件加载 login 组件来获取所有道具。

为此，在 routes.js、

中进行以下更改

{
    path: "/login",
    layout: DefaultLayout,
    component: App // export App and import here
  },

工作代码 - https://codesandbox.io/s/cranky-fog-efen8?file=/src/App.js

TypeError: setEmail is not a function

TypeError: setEmail is not a function

javascript

reactjs

onchange