Хук React 'useState ()' с пустой строкой показывает какое-то значение по умолчанию в поле ввода - PullRequest
0 голосов
/ 29 мая 2020

У меня есть форма входа в систему со следующим кодом

let history = useHistory();
const dispatch = useDispatch();

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

const onSubmit = e => {
    e.preventDefault();
    dispatch(auth(email, password, true));
    history.replace('/home');
};
return (
    <Fragment>
        <div className="w-full max-w-sm container mt-20 mx-auto">
            <form onSubmit={onSubmit}>
                <div className="w-full mb-5">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="email">
                        Email
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:text-gray-600" value={email} onChange={(e) => setEmail(e.target.value)} type="text" placeholder="Email" />
                </div>
                <div className="w-full  mb-5">
                    <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" htmlFor="password">
                        Password
                    </label>
                    <input className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:text-gray-600" value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Password" />
                </div>
                <div className="flex items-center justify-between">
                    <button className="mt-5 bg-green-400 w-full hover:bg-green-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                        Login
                    </button>
                </div>
                <div className="text-center mt-4 text-gray-500"><Link to='/'>Cancel</Link></div>
            </form>
        </div>
    </Fragment>
)

на приведенной выше странице отображаются некоторые начальные значения в адресе электронной почты и пароле. Но когда я дал что-то вроде

const [email, setEmail] = useState('xxxx');

, это будет работать правильно. Не знаю, почему это происходит.

Result with empty string,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...