ReactJS表单需要提交2次才能工作

Question

const [name, setName] = useState("");
const [age, setAge] = useState("");
const initialValues = {
name: "",
age: "",
};
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmit, setIsSubmit] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};
const handleSubmit = (e) => {
setFormErrors(validate(formValues));
setIsSubmit(true);
};
const validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = "Name is required";
}
if (!values.age) {
errors.age= "Age is required";
}
return errors;
};
const userCreate = async () => {
await api.post("/createuser", {
name,
age,
});
};
return (
<div class="container">
<Form
onSubmit={
Object.keys(formErrors).length === 0 && isSubmit
? userCreate
: handleSubmit
}
>
<Form.Field>
<label>Name</label>
<input
name="name"
onChange={(e) => {
setName(e.target.value);
handleChange(e);
}}
values={formValues.name}
/>
<span className="error-message">{formErrors.name}</span>
</Form.Field>
<Form.Field>
<label>Age</label>
<input
name="age"
onChange={(e) => {
setAge(e.target.value);
handleChange(e);
}}
values={formValues.age}
/>
<p className="error-message">{formErrors.age}</p>
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
</div>
);

我正在尝试使用axios来执行POST方法来创建用户。

我觉得一切都很好，但有一个小问题，但我不知道如何解决。

问题是，我总是需要提交两次表单才能发出POST请求。第一次提交时没有发生任何事情，但在第二次提交时会起作用。

有人知道我的代码出了什么问题吗？

已编辑

根据@DBS解决方案。我正在尝试按照步骤操作，但现在表单无法再提交了。如果我错过了什么，有人能告诉我吗？

const [name, setName] = useState("");
const [age, setAge] = useState("");
const initialValues = {
name: "",
age: "",
};
const [formValues, setFormValues] = useState(initialValues);
const [formErrors, setFormErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormValues({ ...formValues, [name]: value });
};


const handleSubmit = (e) => {
if (!Object.keys(formErrors).length && !isSubmitting) {
setFormErrors(validate(formValues));
} else {
userCreate();
setisSubmitting(true);
}
};
const validate = (values) => {
const errors = {};
if (!values.name) {
errors.name = "Name is required";
}
if (!values.age) {
errors.age= "Age is required";
}
return errors;
};
const userCreate = async () => {
await api.post("/createuser", {
name,
age,
});
};
return (
<div class="container">
<Form
onSubmit={handleSubmit}
>
<Form.Field>
<label>Name</label>
<input
name="name"
onChange={(e) => {
setName(e.target.value);
handleChange(e);
}}
values={formValues.name}
/>
<span className="error-message">{formErrors.name}</span>
</Form.Field>
<Form.Field>
<label>Age</label>
<input
name="age"
onChange={(e) => {
setAge(e.target.value);
handleChange(e);
}}
values={formValues.age}
/>
<p className="error-message">{formErrors.age}</p>
<

Answer 1

这里的问题是您的isSubmit，需要是true才能调用userCreate：

onSubmit={
Object.keys(formErrors).length === 0 && isSubmit
? userCreate
: handleSubmit
}

但它以false:开始

const [isSubmit, setIsSubmit] = useState(false);

并且只有在调用handleSubmit时才会更新(令人困惑的是，只有在验证失败时才会调用(

所以你当前的代码是这样做的：

• isSubmit就是false
• 点击Submit，调用handleSubmit，isSubmit设置为true
• 再次点击提交，现在isSubmit是true，它将调用userCreate

要解决这个问题，有几种不同的方法，但我会：

• 将所有提交处理程序逻辑移到onSubmit={handleSubmit}中(为了保持清晰(
• 在里面，检查错误长度(0错误(和isSubmit(为了清楚起见，我可能会将其重命名为isSubmitting，并确保其为false((例如!Object.keys(formErrors).length && !isSubmitting(
• 如果出现错误，则显示相应的消息(将isSubmitting作为false离开(
• 否则，调用userCreate(并将isSubmitting设置为true(
• 最后，如果可以多次提交，请添加effect/callback/然后在调用完成后重置isSubmitting

Answer 2

您是否在使用isSubmitting标志？如果没有，下面可能对你有用。

如果没有错误，调用创建方法

const handleSubmit = (e) => {
setFormErrors(validate(formValues));
if(Object.keys(formErrors).length === 0) {
userCreate();
}
};

如果isSubmitting用于检查提交或创建正在进行的

const handleSubmit = (e) => {
setFormErrors(validate(formValues));

if(Object.keys(formErrors).length === 0) {
setIsSubmitting(true);
userCreate();
}
};

在API成功或失败时，标志isSubmitting应设置为falsesetIsSubmitting(false)