React Axios Post Callback Проблема

У меня большие трудности с получением обратного вызова с помощью axios.post для отправки почты с помощью nodeMailer. Видите ли, электронное письмо отправляется, но буквально не печатает консольный журнал.

Это мой код:

 handleSubmit = async(e) => {
        e.preventDefault();

        const { email, fullname, number, subject, message } = this.state;


            await axios.post('/api/form', {
                email,
                fullname,
                number,
                subject,
                message
              })
              .then((info)=> {
                this.setState({email: '', fullName: '', subject: '', message: ''});
                Alert.success('Success.', {
                    position: 'top-right',
                    effect: 'jelly',
                    timeout: 4000
                });
                console.info(response);
              })
              .catch((e)=> {
                console.info(error);
              });
    }

А это другой код на сервере (index.js):

const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use((request, response, next) => {
    response.header("Access-Control-Allow-Origin", "*");
    response.header("Access-Control-Allow-Headers", "Content-Type");
    next();
  });

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'));

    const path = require('path');
    app.get('*', (req, res) => {
      res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
    });
  }

app.post('/api/form', (req, res) => {

    let transporter = nodemailer.createTransport({
        host: 'host',
        port: 465,
        secure: true, // true for 465, false for other ports
        auth: {
            user: '', // generated ethereal user
            pass: '' // generated ethereal password
        }
    });

    let mailOptions = {
        from: '"New message "<>', // sender address
        to: 'me', // list of receivers
        subject: 'New message', // Subject line
        html: 'Content here' // plain text body// html body
    };

    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return console.info(error);
        }
        console.info('Message sent: %s', info.messageId);
        // Preview only available when sending through an Ethereal account
        console.info('Preview URL: %s', nodemailer.getTestMessageUrl(info));

        // Message sent: <[email protected]>
        // Preview URL: https://ethereal.email/message/WaQKMgKddxQDoou...
    });

});


const PORT = process.env.PORT || 3001;

app.listen(PORT, () => {
    console.info('Server running on port 3001.')
})

В чем здесь проблема? Я пробовал использовать «axios.get» и «axios.request», и это, по крайней мере, выводит ошибку.

Вы возвращаете response из транспортера? Я использую axios и nodemailer в бэкенде, но я не вижу никакого ответа в вашем коде. Вы обрабатываете ответ Promise от транспортера в другом месте?

Sabbin 18.02.2019 14:55

@Sabbin В том-то и дело, что это мой код, за исключением того, что у меня, очевидно, есть данные сообщения в моем вызове axios.post. Не могли бы вы поделиться со мной своим кодом?

askaale 18.02.2019 14:57

потому что это асинхронное действие, и вы не ждете ответа

Amir-Mousavi 18.02.2019 14:57

Поделюсь ответом с кодом для node если не ок, удалю

Sabbin 18.02.2019 14:58

@ Амир-Мусави Амир-Мусави, как мне правильно подойти к этому? Я пробовал использовать async и await, но, возможно, я сделал это неправильно. У вас есть ссылка, с помощью которой вы можете указать мне правильное направление?

askaale 18.02.2019 15:01
freecodecamp.org/forum/t/…
Amir-Mousavi 18.02.2019 15:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
6
545
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я использую Promise, чтобы дождаться ответа от транспортера и отправить его во внешний интерфейс, где axios проанализирует его.

const sendMail = () => new Promise((resolve, reject) => {
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      reject(error);
    } else {
      resolve(info);
    }
  });
})
.....other code.....
const status = await sendMail();
res.json({status})

LE

Основываясь на вашем коде, вот как должен выглядеть маршрут /api/form

app.post('/api/form', async (req, res) => {

  const transporter = nodemailer.createTransport({
    host: 'host',
    port: 465,
    secure: true, // true for 465, false for other ports
    auth: {
      user: '', // generated ethereal user
      pass: '' // generated ethereal password
    },
  });

  const mailOptions = {
    from: '"New message "<>', // sender address
    to: 'me', // list of receivers
    subject: 'New message', // Subject line
    html: 'Content here' // plain text body// html body
  };

  const sendMail = () => new Promise((resolve, reject) => {
    transporter.sendMail(mailOptions, (error, info) => {
      if (error) {
        reject(error.message);
      } else {
        resolve(`Message sent: ${info.messageId}`);
      }
    });
  });

  const status = await sendMail();
  res.json({ status });

});

Большое Вам спасибо. Просто быстрый вопрос, мне вставить этот код на стороне клиента в мою контактную форму или index.js (сервер)?

askaale 18.02.2019 15:12

в server

Sabbin 18.02.2019 15:30

Это все еще не работает. Я не вижу никакого вывода в консоли. Это потому, что я работаю на сервере разработки?

askaale 18.02.2019 15:43

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

Sabbin 18.02.2019 15:45

Теперь я обновил код почти всем, что я использую. Это помогает? Пожалуйста, дайте мне знать, если вам нужна дополнительная информация от меня.

askaale 18.02.2019 16:05

Я обновил свой ответ на основе вашего кода. Теперь вы должны получить ответ в axios во внешнем интерфейсе.

Sabbin 18.02.2019 16:13

Вы также можете удалить await в передней части с axios

Sabbin 18.02.2019 16:20

Вау! Это сработало! Единственная проблема, с которой я сталкиваюсь сейчас, заключается в том, что я получаю сообщение об ошибке, когда пытаюсь установить setState afer then(), и оно говорит: TypeError: Cannot read property 'setState' of undefined. В чем здесь проблема? Кстати, большое спасибо!

askaale 18.02.2019 16:27

Я не вижу метод setState в вашем коде React, вы можете обновить код?

Sabbin 18.02.2019 16:28

Я решил проблему, теперь я обновил код полностью работающим кодом, чтобы все остальные могли проверить, не столкнулись ли они с той же проблемой.

askaale 18.02.2019 16:31

Другие вопросы по теме