0

在通过钩子制作登录/注册组件时，我用钩子为登录、注销、注册和用户制作了单独的功能。

因为钩子对我来说更容易，所以在执行 npm start 后，没有显示错误。

应用程序.js：

import React,{useState} from 'react';
import Users from './Users'


const App=()=> {

        const [user,setUser]=useState('')
          return (  
                <div style={{padding:8}} className="container">
                    <Users user={user} setUser={setUser}/>
                    <br/>
                    <hr/>
                   </div>
            );
        }

export default App

登录.js：

import React,{useState} from 'react'
const Login=(setUser)=>{
    const [username,setUsername]=useState('');

    const handleUserName=(event)=>{
        setUsername(event.target.value)
    }
    return(
    <form onSubmit={e => { e.preventDefault(); setUsername(username) }}>
      <label htmlFor="login-username">Username:</label>
      <input type="text" value={username} onChange={handleUserName} name="login-username" id="login-username" />
      <label htmlFor="login-password">Password:</label>
      <input type="password" name="login-password" id="login-password" />
      <input type="submit" value="Login" disabled={username.length === 0} />
    </form>
    )
}

export default Login

注销.js：

import React from 'react'

const Logout=(user,setUser)=>{
return(
    <form onSubmit={e=>{e.preventDefault();setUser('')}}>
        Logged in As:<b>{user}</b>
        <input type="submit" value="Logout"></input>
    </form>
)
}
export default Logout

注册.js：

import React,{useState} from 'react'
const Register=(setUser)=>{
    const [username,setUsername]=useState('')
    const [password,setPassword]=useState('')
    const [passwordRepeat,setPasswordRepeat]=useState('')

    const handleUserName=(event)=>{
        setUsername(event.target.value)
    }

    const handlePassword=(event)=>{
        setPassword(event.target.value)
    }
    const handlePasswordRepeat=(event)=>{
        setPasswordRepeat(event.target.value)
    }

    return(
        <form onSubmit={e=>{e.preventDefault();setUsername(username)}}>
            <label htmlFor="register-username">Username:</label>
            <input type="text" value={username} onChange={handleUserName} name="register-username" id="register-username"/>
            <br/>
            <label htmlFor="register-password">Password:</label>
            <input type="password" value={password} onChange={handlePassword} name="register-password" id="register-password"/>
            <br/>
            <label htmlFor="register-password-repeat">repeat password:</label>
            <input type="password" value={passwordRepeat} onChange={handlePasswordRepeat} name="register-password-repeat" id="register-password-repeat"/>
            <input type="submit" value="Register" disabled={username.length===0||password.length===0||password!==passwordRepeat}/>
        </form>
    )

}
export default Register

用户.js：

import React,{useState} from 'react'
import Login from './Login'
import Logout from './Logout'
import Register from './Register'
const User=()=>{
    const {user,setUser}=useState('');

        if (user){
            return <Logout user={user} setUser={setUser}/>
        } else {
            return (
                <React.Fragment>
                    <Login setUser={setUser}/>
                    <br/>
                    <Register setUser={setUser}/> 
                </React.Fragment>
            )
        }

} 
export default User;

没有显示错误，但是当我尝试注册用户名时，它显示TypeError: setUser is not a function reacjs in register.js 行<form onSubmit={e=>{e.preventDefault();setUser(username)}}>

我对 reactJS 很陌生，我知道我在调用 setUser 时做错了......但它似乎是 react 自己的功能。

如果你给我任何解释的解决方案，这将是一个很好的学习方式。我想修改代码并以我自己可以理解的方式编写这些代码。

提前谢谢

4

3 回答 3

1

我认为您在单击注销时会出现错误，因为没有 setuser 功能。您可以通过道具传递操作来处理此问题

这是您的代码中的工作示例

于 2020-03-20T13:17:25.667 回答
0

您收到此错误是因为您在钩子中将 setUsername 作为操作函数，并且在提交表单时调用了 setUser，而该表单在您的 register.js 中没有。所以在你的表单提交中使用 setUsername 而不是 setUser。

Register.js

import React,{useState} from 'react'
const Register=(setUser)=>{
    const [username,setUsername]=useState('') // here : you've serUsername
    const [password,setPassword]=useState('')
    const [passwordRepeat,setPasswordRepeat]=useState('')

    const handleUserName=(event)=>{
        setUsername(event.target.value)
    }

    const handlePassword=(event)=>{
        setPassword(event.target.value)
    }
    const handlePasswordRepeat=(event)=>{
        setPasswordRepeat(event.target.value)
    }

    return(
        <form onSubmit={e=>{e.preventDefault(); **setUsername(username)**}}>
            <label htmlFor="register-username">Username:</label>
            <input type="text" value={username} onChange={handleUserName} name="register-username" id="register-username"/>
            <br/>
            <label htmlFor="register-password">Password:</label>
            <input type="password" value={password} onChange={handlePassword} name="register-password" id="register-password"/>
            <br/>
            <label htmlFor="register-password-repeat">repeat password:</label>
            <input type="password" value={passwordRepeat} onChange={handlePasswordRepeat} name="register-password-repeat" id="register-password-repeat"/>
            <input type="submit" value="Register" disabled={username.length===0||password.length===0||password!==passwordRepeat}/>
        </form>
    )

}
export default Register

同样在您的 login.js 文件中，您犯了同样的错误，更正如下；

import React,{useState} from 'react'
const Login=(setUser)=>{
    const [username,setUsername]=useState(''); // here same mistake

    const handleUserName=(event)=>{
        setUsername(event.target.value)
    }
    return(
    <form onSubmit={e => { e.preventDefault(); **setUsername(username)** }}> 
      <label htmlFor="login-username">Username:</label>
      <input type="text" value={username} onChange={handleUserName} name="login-username" id="login-username" />
      <label htmlFor="login-password">Password:</label>
      <input type="password" name="login-password" id="login-password" />
      <input type="submit" value="Login" disabled={username.length === 0} />
    </form>
    )
}

export default Login
于 2020-03-20T10:03:52.430 回答
0

因为这个字符串：const {user,setUser}=useState('') setUser is undefined; 当您尝试调用它时，您会收到错误，因为 undefined 不是函数。

你应该输入： const [user,setUser]=useState('');

于 2020-03-20T10:01:28.490 回答