Question

我似乎无法找到导致无效钩子调用的原因，即使我的钩子实际上是在一个功能组件下。也许有人可以准确地为我指出它，我正在尝试多种方法来消除此错误。

这是我的 Login.js

import logo from '../logo.svg';
import React, { useState } from 'react';
import {
  Browser,
  Redirect,
  Route,
  Switch
} from 'react-router-dom';

import userDashboard from './userDashboard';
import adminDashboard from './adminDashboard';

function Login(props) {
const useValueGrepper = (initialValue) => { 
    const [value, setValue] = useState(initialValue);
    
    const handleChange = e => {
        setValue(e.target.value);
    }

    return {
        value,
        onChange: handleChange
    }
    }

  const employees = [ '00000000', '11111111'];
  const pass = [ 'user', 'user']  

  const employeeId = useValueGrepper();
  const password = useValueGrepper();


  const handleSubmit = (event) => {
    event.preventDefault();

    if(employeeId || password === null){
      alert('Missing Entries')
    }
    
    console.log(employeeId.value);
    console.log(password.value);
  }

  return (
        
    <div className="App">
    <header className="posHeader">
        <div className='logoContainer'>
            <img src={logo} className='logo' alt="logo.svg" height='65px' width='80px'/>
        </div>
    </header>

    <div className="loginContainer" >
          <div className="loginForm">
            <div className="loginBanner">
              <h1>Sign In</h1>
            </div>

            <form onSubmit={handleSubmit}>
              <div className="form-group">
                  <label>Employee Id</label> <br/>
                  <input type="employee" className="form-control" placeholder="Employee Id" autoComplete="new-employeeId" {...employeeId} pattern="[0-9]+" minlength="8" maxlength="10" />
              </div>

              <br/>

              <div className="form-group">
                  <label>Password</label> <br/>
                  <input type="password" className="form-control" placeholder="Enter password" autoComplete="new-password" pattern="[a-zA-Z0-9]+" minlength="4" maxlength="32" {...password}/>
              </div>

              <button type="submit" className="btn btn-primary btn-block">Login</button>
              <p className="forgot-password text-right">
                  Forgot <a href="#">password?</a>
              </p>
            </form>
          </div>
      </div>
    </div>
    );
}



export default Login;

这是我的 App.js，它应该是我的路线。我还没有设置任何中间件等。

import logo from './logo.svg';
import './App.css';
import React, { useState } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch
} from 'react-router-dom';

import Login from './pages/login';
import userDashboard from './pages/userDashboard';
import adminDashboard from './pages/adminDashboard';

function App() {
  return(
    <Router>
        <div className="container">
          <Switch>
            <Route path="/" render={Login}  />
            <Route path="/user" render={userDashboard} />
            <Route path='/admin' render={adminDashboard} />
          </Switch>
        </div>
      </Router>
  );
}

export default App;

错误被指出

useValueGrepper
src/pages/login.js:15
  12 | 
  13 | function Login(props) {
  14 | const useValueGrepper = (initialValue) => { 
> 15 |     const [value, setValue] = useState(initialValue);
  16 |     
  17 |     const handleChange = e => {
  18 |         setValue(e.target.value);

Answer 1

钩子的定义应该在功能组件之外，你可以在功能组件内部调用/使用钩子。

自定义钩子上的无效钩子调用

1 个答案: