0

フックを介してログイン/登録コンポーネントを作成しながら、ログイン、ログアウト、登録、およびユーザー用のフックを使用して個別の関数を作成しました。

フックは私にとっては簡単なので、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

ログイン.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

ユーザー.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

0

この文字列のため: const {user,setUser}=useState('') setUser is undefined; undefined は関数ではないため、呼び出そうとするとエラーが発生します。

次のように入力する必要があります。 const [user,setUser]=useState('');

于 2020-03-20T10:01:28.490 に答える