почему кнопка регистрации не регистрирует логин и пароль? - PullRequest
Новая
       36

почему кнопка регистрации не регистрирует логин и пароль?

0 голосов
/ 20 марта 2020

при создании компонентов входа / регистрации через ловушку я сделал отдельные функции с ловушкой для входа в систему, выхода из системы, регистрации и пользователей.

, так как ловушка проще для меня, после исключения 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 не является функцией rea cjs in зарегистрируйтесь. js в строке <form onSubmit={e=>{e.preventDefault();setUser(username)}}>

Я очень плохо знаком с reactJS и знаю, что допустил ошибку при вызове setUser .... но кажется, что это - собственная функция реагирования.

Если вы дадите мне какое-либо решение с объяснением, это будет хорошим способом обучения. Я хотел бы изменить коды и написать их по-своему понятным способом.

спасибо заранее

Ответы [ 3 ]

1 голос
/ 20 марта 2020

Я думаю, что вы получаете ошибку, когда нажимаете на выход из системы, потому что нет функции setuser. Вы можете справиться с этим, передавая действия через props

Вот рабочий пример из вашего кода

0 голосов
/ 20 марта 2020

вы получаете эту ошибку, потому что вы установили setUsername в качестве функции действия в своей ловушке и при отправке формы вы вызываете setUser, которого нет в вашем регистре. 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

также в вашем логине. 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
0 голосов
/ 20 марта 2020

из-за этой строки: const {user,setUser}=useState('') setUser is undefined; когда вы пытаетесь вызвать его, вы получаете ошибку, потому что undefined не является функцией.

вы должны набрать: const [user,setUser]=useState('');

...