为什么注册按钮没有注册用户名和密码

Question

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

由于钩子对我来说更容易，在执行npm启动后，没有显示任何错误。

App.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

Users.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;

没有显示错误，但当我尝试注册用户名时，它显示类型错误：setUser不是register.js中<form onSubmit={e=>{e.preventDefault();setUser(username)}}>行中的函数reacjs

我是reactJS的新手，我知道我在调用setUser时犯了一些错误。。。。但它似乎是反作用的。

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

乙醇提前

Answer 1

我认为您在点击注销时会遇到错误，因为没有setuser函数。您可以通过props 传递操作来处理此问题

以下是您的代码的工作示例

Answer 2

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

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

Answer 3

您之所以会出现此错误，是因为您在钩子中设置了setUsername作为操作函数，并且在提交表单时，您正在调用setUser，而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