ReactJs - 使用 Formik 用 axios 写表单答案

【问题标题】：ReactJs- Using Formik to write a form with axiosReactJs - 使用 Formik 用 axios 写表单
【发布时间】：2018-06-29 10:14:43
【问题描述】：

我正在为我的网站创建一个包含用户联系信息的表单。该站点在客户端使用 ReactJs，而对于后端，我使用的是 NodeJs 和 ExpressJs。

我一直在使用 FormikJs 来创建表单组件。在下面的代码中，我已经创建了表单并将其传递给 Formik 内置的更高阶组件。我发现它对于使用 Yup 进行验证以及快速创建表单布局和一些基本表单功能很有用，但我无法真正让它将用户的输入发送到后端。

我正在尝试使用 axios 向“/send”（使用 express 创建的路由）发送 POST 请求，以便我的应用程序的后端部分可以检索联系信息并使用 nodemailer 将其邮寄给自己。

const FormikApp = withFormik({
mapPropsToValues: // props being mapped to values
},

validationSchema: // Yup Validation Schema

async handleSubmit(e, values, { resetForm, setErrors, setSubmitting }){
    const { name, company, phone, email, message} = this.value;

    const form = await axios.post("/send", {
        name,
        company,
        phone,
        email,
        message
    })
    resetForm();
    setSubmitting(false);

}
})(Forms);

我的问题是没有“const { name, company, phone, email, message} = this.value;”抛出一个错误，名称、公司、电话、电子邮件和消息未定义。有了这条线，一切都很好，但我仍然无法收到使用表单的电子邮件。

我很确定我已经在并发的帮助下正确地为客户端和服务器站点设置了 package.json 文件，并且我相信表单本身存在问题。我认为应该归咎于 formik 的 handleSubmit 函数，但我不知道如何解决这个问题。这可能是因为我没有正确定义值或没有正确声明 handleSubmit 应该是一个异步函数。有人可以帮忙吗？

我打算在没有 formik 的情况下从头开始创建表单，这样我就可以更好地控制 handleSubmit 函数以及如何定义值。

提前感谢任何提供帮助的人！如有必要，请随时索取代码 sn-ps。

【问题讨论】：

你在哪里调用变量“form”来实际发布数据？

标签： javascript reactjs forms axios formik

【解决方案1】：

我认为你应该在第 8 行更改你的代码：

const { name, company, phone, email, message} = values;

【讨论】：