ReactJs - Использование Formik для написания формы с аксиосами - PullRequest
Новая
       11

ReactJs - Использование Formik для написания формы с аксиосами

0 голосов
/ 29 июня 2018

Я создаю форму для моего сайта, которая принимает контактную информацию пользователя. Сайт использует ReactJ для клиентской части, а для серверной части я использую NodeJ и ExpressJ.

Я использовал FormikJs для создания компонента формы. В приведенном ниже коде я уже создал форму и передам ее компоненту более высокого порядка, встроенному в Formik. Я нашел его полезным для проверки с помощью Yup, а также для быстрого создания макета формы и некоторых основных функций формы, но у меня возникают проблемы с тем, чтобы заставить его отправлять входные данные пользователей в бэкэнд.

Я пытаюсь использовать axios для отправки запроса POST в "/ send" (маршрут, созданный с помощью Express), чтобы внутренняя часть моего приложения могла получить контактную информацию и использовать 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 {имя, компания, телефон, электронная почта, сообщение} = this.value;" выдается ошибка, что имя, компания, телефон, адрес электронной почты и сообщение не определены. И с этой строкой все отображается нормально, но я все еще не могу получить электронное письмо от использования формы.

Я почти уверен, что настроил файл package.json для клиентского и серверного сайта одновременно с помощью правильно, и я верю, что есть проблема с самой формой. Я думаю, что виновата функция handleSubmit с formik, но я не знаю, как я мог это исправить. Это может быть потому, что я неправильно определяю значения или неправильно заявляю, что handleSubmit должен быть асинхронной функцией. Может ли кто-нибудь помочь?

Я планирую просто создать форму с нуля без formik, чтобы иметь больше возможностей контролировать функцию handleSubmit и то, как определяются значения.

Заранее спасибо всем, кто помогает! Не стесняйтесь спрашивать фрагменты кода, если это необходимо.

...