必须提交两次才能使props.history.push生效

Question

我目前正忙于客户端表单验证。没有后端或任何类似的东西。我有一个on submit功能，一旦使用props.history.push提交了有效的表单，我就会尝试将用户推送到主页。出于某种原因，我必须提交两次表单才能使用on submit函数将用户推到主页。我不确定为什么会发生这种情况。下面我将提供我的useForm挂钩、我的登录页面和我正在使用的验证功能。我觉得答案可能很明显，但我就是找不到问题所在。

useForm挂钩：

import { useState } from "react"
const INITIAL_STATE = {
email: "",
password: ""
}
const UseForm = (ValidateLogin, props) => {
const [formData, setFormData] = useState(INITIAL_STATE)
const [errors, setErrors] = useState({})
const [user, setUser] = useState(null)
const handleChange = field => e => {
setFormData({ ...formData, [field]: e.target.value })
}
const handleSubmit = event => {
event.preventDefault()
setUser(formData)
setErrors(ValidateLogin(formData))
user && !errors.email && !errors.password && props.history.push("/")
}
return {
handleChange,
handleSubmit,
formData,
user,
errors
}
}
export default UseForm

登录页面：

import React from "react"
import UseForm from "../Login/UseForm"
import ValidateLogin from "../Login/ValidateLogin"
import { makeStyles } from "@material-ui/core/styles"
// Material UI
import TextField from "@material-ui/core/TextField"
import Button from "@material-ui/core/Button"
import Typography from "@material-ui/core/Typography"
import Container from "@material-ui/core/Container"
const useStyles = makeStyles(theme => ({
form: {
textAlign: "center",
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
position: "relative"
},
logo: {
width: 80,
margin: "20px auto 20px auto"
},
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center"
},
submit: {
margin: theme.spacing(3, 0, 2),
position: "relative"
},
progress: {
position: "absolute"
},
customError: {
color: "red",
fontSize: "0.8rem",
width: "100%",
position: "absolute"
}
}))
const Login = props => {
const classes = useStyles()
const { handleChange, handleSubmit, formData, user, errors } = UseForm(
ValidateLogin,
props
)
const isInvalid = !formData.email || !formData.password
return (
<div style={{ textAlign: "center" }}>
<Typography variant='h5' gutterBottom>
Welcome, Please Login
</Typography>
<Container component='main' maxWidth='xs'>
<form className={classes.form} onSubmit={handleSubmit}>
<TextField
variant='outlined'
fullWidth
margin='normal'
label='Email'
type='text'
name='email'
value={formData.email}
error={errors.email ? true : false}
helperText={errors.email}
onChange={handleChange("email")}
/>
<TextField
variant='outlined'
margin='normal'
fullWidth
label='Password'
type='password'
name='password'
value={formData.password}
error={errors.password ? true : false}
helperText={errors.password}
onChange={handleChange("password")}
/>
<br />
<Button
variant='outlined'
color='primary'
type='submit'
disabled={isInvalid}
className={classes.submit}
>
Submit
</Button>
</form>
</Container>
<br />
{user &&
!errors.email &&
!errors.password &&
JSON.stringify(user, null, 2)}
</div>
)
}
export default Login

验证登录：

export default function ValidateLogin(formData) {
let errors = {}
if (!formData.email) {
errors.email = "Email address is required"
} else if (!/S+@S+.S+/.test(formData.email)) {
errors.email = "Email address is invalid"
}
if (!formData.password) {
errors.password = "Password is required"
} else if (formData.password.length < 6) {
errors.password = "Password must be longer than 6 characters"
}
return errors
}

任何有用的建议或反馈都将不胜感激！！我为这个冗长的问题道歉。感谢您花时间阅读本文。

Answer 1

看起来您的问题是这个块中的条件：

setUser(formData)
setErrors(ValidateLogin(formData))
user && !errors.email && !errors.password && props.history.push("/")

user和errors在评估此条件时将不会更新，因为状态设置程序是异步的。这里有一个更详细的解释。

这就是为什么它在第二次提交时有效。然后更新了这些值，条件就通过了。

这可能不是想要的最终解决方案，但它应该为您解决问题。

const handleSubmit = event => {
event.preventDefault()
setUser(formData)
// Use temp variable so that you can use it immediately below
const tempErrors = ValidateLogin(formData);
setErrors(tempErrors)
// Use the formData directly and the tempErrors
formData && !tempErrors.email && !tempErrors.password && props.history.push("/")
}