即使输入字段为空，登录仍然会发生

Question

我正在使用 React 创建登录页面。即使输入为空，Localhost:3000 仍会提醒 'thank you for registering'。从教程中做到这一点并完全按照代码进行操作，但几天仍然无法弄清楚。我尝试删除 if-else 语句中双引号之间的 space，但无济于事。

代码如下：

import { useState } from "react";
import styles from "./register.css";
import Login from "../../containers/login/index";

function Register({ props, history }) {

    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();

    function registerClicked() {
        if (name !== " " && email !== " " && password !== " ") {
            console.log(name, email, password);
            alert("Thanks for registering");
            history.push("/");
        } else {
            alert("Please register to continue");
        }
    }


    return(
        <div className="regContainer">

            <p className="registerTitle">Register to sign in</p>

            <input type="text" 
            placeholder="Create username" 
            onChange={(nameText) => setName(nameText.target.value)} />

            <input type="text" 
            placeholder="Email address" 
            onChange={(emailText) => setEmail(emailText.target.value)} />

            <input type="password" 
            placeholder="Password" 
            onChange={(passwordText) => setPassword(passwordText.target.value)} />

            <button onClick={() => registerClicked()}>Register</button>

            <p className="loginInstead">Already have an account? Sign in instead</p>

        </div>
    );
}

export default Register;

Answer 1

因为 const [name, setName] = useState(); name 实际上等于 undefined.

设置默认值const [name, setName] = useState("");

或者使用模糊判断if(!name)

Answer 2

注册后的所有状态必须设置为空

if (name !== "" && email !== "" && password !== "") {
        console.log(name, email, password);
        alert("Thanks for registering");
        setName(null);
        setEmail(null);
        setPassword(null);
        history.push("/");
    }

prop 值必须设置为所有输入

 <input type="text" 
        placeholder="Create username" 
        value={name}
        onChange={(nameText) => setName(nameText.target.value)} />

        <input type="text" 
        placeholder="Email address"
        value={email} 
        onChange={(emailText) => setEmail(emailText.target.value)} />

        <input type="password" 
        placeholder="Password" 
        value={password}
        onChange={(passwordText) => setPassword(passwordText.target.value)} />

即使输入字段为空，登录仍然会发生

Login still happens even when input fields are empty

javascript

reactjs

authentication

alert