1

我正在为我的网站创建一个包含用户联系信息的表单。该站点在客户端使用 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 函数以及如何定义值。

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

4

1 回答 1

1

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

const { name, company, phone, email, message} = values;
于 2019-12-25T13:30:44.313 回答