在表单提交之前跳过验证

Question

我的表单提交将在提交错误输入时跳过显示验证错误消息。当出现错误信息时，我如何阻止提交?

我代码:

import React, { useState } from "react";
const App = () => {
const [formData, setFormData] = useState({ name: "" });
const [formError, setFormError] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const [formSubmitted, setFormSubmitted] = useState(false);
const validate = () => {
const errors = {};
console.log("2. errors: ", errors); //<=== point 2.
if (formData.name.length === 0) {
errors.name = "name required";
}
console.log("3. errors: ", errors);  //<=== point 3.
return errors;
};
const handleSubmit = (e) => {
e.preventDefault();
setIsSubmit(true);
console.log("1. formData: ", formData);  //<=== point 1.
setFormError(validate(formData));
console.log("4. formError: ", formError);  //<=== point 4.
// This is true only if formError is empty object
if (
Object.keys(formError).length === 0 &&
formError.constructor === Object
) {
console.log("5. sending data: ", formData.name);  //<=== point 5.
// Sending data to API here
setIsSubmit(false);
setFormSubmitted(true);
return;
}
setIsSubmit(false);
return;
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return (
<>
{formSubmitted ? (
<p>Thank you</p> //<=== Thank you prhase
) : (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Your name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
{formError.name && <p>{formError.name}</p>}
{isSubmit ? (
<p>Sending...</p>
) : (
<input type="submit" value="Submit" />
)}
</form>
)}
</>
);
};
export default App;

当提交空输入(错误输入)时控制台:

1. formData:  {name: ''}
2. errors:  {}
3. errors:  {name: 'name required'}
4. formError:  {}
5. sending data:  

控制台提交时输入"test"(右输入):

1. formData:  {name: 'test'}
2. errors:  {}
3. errors:  {}
4. formError:  {}
5. sending data:  test

当我提交一个正确的输入时，表单将按照我想要的方式运行。

提交右输入->输入验证->没有发现错误->发送数据->show &;Thank you&;句话

但是如果我提交错误的输入。

提交错误输入->输入验证->发现错误->附加错误信息->但仍然返回空对象(到formError) ->发送空输入->show &;Thank you&;句话

问题是在第4点，validate()函数不会返回错误消息。在我的实际文件与API，而提交错误的输入将显示错误消息(例如formError.name)(需要1到2秒发送数据到CMS)，但提交仍然会通过并显示"谢谢你"短语。我该如何解决这个问题?谢谢你。

Answer 1

状态更新不同步。

您可以提取变量中的错误(在下面的示例中名为errors)，并基于该变量而不是状态执行条件逻辑。

import React, { useState } from "react";
const App = () => {
const [formData, setFormData] = useState({ name: "" });
const [formError, setFormError] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const [formSubmitted, setFormSubmitted] = useState(false);
const validate = () => {
const errors = {};
if (formData.name.length === 0) {
errors.name = "name required";
}
return errors;
};
const handleSubmit = (e) => {
e.preventDefault();
setIsSubmit(true);
const errors = validate(formData); // extracting here
setFormError(errors); // setting state using the extracted value
// validating using the extracted value
if (Object.keys(errors).length === 0 && errors.constructor === Object) {
// Sending data to API here
setIsSubmit(false);
setFormSubmitted(true);
return;
}
setIsSubmit(false);
return;
};
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
return (
<>
{formSubmitted ? (
<p>Thank you</p> //<=== Thank you prhase
) : (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Your name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
{formError.name && <p>{formError.name}</p>}
{isSubmit ? (
<p>Sending...</p>
) : (
<input type="submit" value="Submit" />
)}
</form>
)}
</>
);
};
export default App;