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

Question

在通过钩子(Hook)制作登录/注册组件时，我用钩子(Hook)制作了登录、注销、注册和用户的单独函数。

由于 hook 对我来说更容易，执行 npm start 后，没有显示错误。

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 

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

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

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

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

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

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

提前致谢

Answer 1

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

Here is the working example from your code