gpt4 book ai didi

javascript - 为什么 Formik.setStatus 不更新我表单中的 Status 状态?

转载 作者:行者123 更新时间:2023-12-05 08:51:09 27 4
gpt4 key购买 nike

我正在使用 Formik 在 React 中创建一个通用的联系表单。我正在从我的 api 获取数据并尝试调用 Formik 的 setStatus生成一条消息,表明表单已成功提交。

无论出于何种原因 Status状态永远不会更新以反射(reflect)我输入的内容 setStatus .

这是我的代码:

import { Formik, Form, useField } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Button from "components/shared/button";
import "styles/contact/form.scss";

const handleSubmit = (values, actions) => {
axios.post("http://localhost:5000/sendemail/", values).then(res => {
actions.setSubmitting(false);
actions.setStatus = {
message: res.data.message
};
setTimeout(() => {
actions.resetForm();
}, 3000);
});
};

const FormField = ({ label, tagName, ...props }) => {
const [field, meta] = useField(props);
const errorClass = meta.touched && meta.error ? "error" : "";
const TagName = tagName;
return (
<>
<label htmlFor={props.id || props.name}>
{label}
{meta.touched && meta.error ? (
<span className="error">{meta.error}</span>
) : null}
</label>
<TagName
className={`form-control ${errorClass}`}
{...field}
{...props}
/>
</>
);
};

const ContactForm = () => (
<Formik
initialValues={{ name: "", email: "", msg: "" }}
validationSchema={Yup.object({
name: Yup.string().required("Required"),
email: Yup.string()
.email("Invalid email address")
.required("Required"),
msg: Yup.string().required("Required")
})}
onSubmit={handleSubmit}>
{({ isSubmitting, status }) => (
<Form className="contact-form">
<div className="row form-group">
<div className="col">
<FormField
label="Name"
name="name"
type="text"
tagName="input"
/>
</div>
<div className="col">
<FormField
label="Email"
name="email"
type="text"
tagName="input"
/>
</div>
</div>
<div className="form-group">
<FormField label="Message" name="msg" tagName="textarea" />
</div>
{status && status.message && (
<div className="message">{status.message}</div>
)}
<Button
id="formSubmit"
text="Send Message"
type="submit"
isSubmitting={isSubmitting}
/>
</Form>
)}
</Formik>
);

export default ContactForm;

就在我的提交按钮之前,它应该显示 <div class="message">Success message</div>提交表格后。当我尝试调试 Status 的值时总是“未定义”。

有人知道我在这里做错了什么吗?

最佳答案

它不起作用的原因是因为我试图将 setStatus 的值设置为一个对象。我应该做的是将它用作方法并将对象作为参数传递。

像这样:

actions.setStatus({message: res.data.message});

这么久都没有犯这个简单的错误,我觉得自己很傻。

关于javascript - 为什么 Formik.setStatus 不更新我表单中的 Status 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60349659/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com