node.js - 我有一个简单的反应联系我表格，它应该从 nodemailer 发送的电子邮件是空的

Question

这是我的前端代码，我认为问题就在这里。因此，当提交表单时，所有应该工作的东西都可以工作，但电子邮件显示为空。此外，我在控制台中遇到错误，它是......

无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

所以，我添加了 useEffect 清理功能，尽管我不确定我是否做得对，但错误消失了。这两件事有关系吗？不知何故，状态没有及时更新。如果我对电子邮件发送的消息进行硬编码。谢谢你。此外，任何额外的建议都会很酷。

     import React, { useEffect, useState } from 'react';
     import axios from 'axios';


     export default function ContactMe(props) {
     
       const [data, setData] = useState({email: '',phone: '', 
       message: '', sent: false});
       const [thankYouMessage, setThankYouMessage] = useState('');
     
         const goBack = () => {
             props.setIsOnHomePage(true);
         }
     
         const onChange = (e) => {
           const {name, value} = e.target
               setData({
                   ...data,
                   [name]: value
           })
         }
     
         const resetForm = () => {
           setData({
               email: '',
               phone: '',
               message: '',
               sent: false,
           });
         }
     
         // here I think is the problem in this function?
         const onSubmit = (e) => {
           setData({
             ...data,
         })
     
         axios.post('/api/sendmail', data)
     .then(res => {
         if(res.data.result !=='success') {
             setData({
                 ...data,
                 sent: false,
             })
             resetForm();
         } else {
           setData({
               ...data,
               sent: true,
           })
           resetForm();
       }
     }).catch( (err) => {
       setData({
           ...data,
       })
     })
           setThankYouMessage('thank you');
     }
     
        useEffect(() => {
          const source = axios.CancelToken.source()
          return () => {
            source.cancel()
        }
      }, [])
     
     

         return (
                <div className = 'contact-me-form'>
                   <button className = 'go-back' onClick = 
                   {goBack}>go back</button>
                   <h1 className = 'contact-me-title'>Contact 
                    me</h1>
                   <form>
                     <p className = 'input-title'>email</p>
                     <input className = 'input-field' defaultValue 
                      = {data.email} onChange={onChange}></input>
                     <p className = 'input-title' >phone 
                      number</p>
                     <input className = 'input-field' defaultValue 
                      = {data.phone} onChange={onChange}></input>
                     <p className = 'input-title' >message</p>
                     <textarea className = 'text-field' 
                     defaultValue = {data.message} onChange= 
                     {onChange} rows = '3'></textarea>
                   </form>
                   <button onClick = {() => {onSubmit()}} 
                    className = 'submit-contact-form- 
                    button'>submit</button>
                   <p className = 'thank-you-message'> 
                   {thankYouMessage}</p>
                </div>
         )
     }

标签： node.jsreactjsaxiosnodemailernetlify

Answer 1

您需要三个主要更改：

1. 在 input/textarea 标签中设置 name 属性；
2. 在 onChange 处理程序中，使用e.target.getAttribute("name");获取名称属性
3. 在 onSubmit 处理程序中，删除 setData，因为是不必要的；

import React, { useEffect, useState } from "react";
import axios from "axios";

export default function ContactMe(props) {
  const [data, setData] = useState({
    email: "",
    phone: "",
    message: "",
    sent: false,
  });
  const [thankYouMessage, setThankYouMessage] = useState("");

  const goBack = () => {
    props.setIsOnHomePage(true);
  };

  const onChange = (e) => {
    const value = e.target.value;
    const name = e.target.getAttribute("name");
    setData({
      ...data,
      [name]: value,
    });
  };

  const resetForm = () => {
    setData({
      email: "",
      phone: "",
      message: "",
      sent: false,
    });
  };

  // here I think is the problem in this function?
  const onSubmit = (e) => {
    axios
      .post("/api/sendmail", data)
      .then((res) => {
        if (res.data.result !== "success") {
          setData({
            ...data,
            sent: false,
          });
          resetForm();
        } else {
          setData({
            ...data,
            sent: true,
          });
          resetForm();
        }
      })
      .catch((err) => {
        setData({
          ...data,
        });
      });
    setThankYouMessage("thank you");
  };

  useEffect(() => {
    const source = axios.CancelToken.source();
    return () => {
      source.cancel();
    };
  }, []);

  return (
    <div className="contact-me-form">
      <button className="go-back" onClick={goBack}>
        go back
      </button>
      <h1 className="contact-me-title">Contact me</h1>
      <form>
        <p className="input-title">email</p>
        <input
          className="input-field"
          defaultValue={data.email}
          name="email"
          onChange={onChange}
        ></input>
        <p className="input-title">phone number</p>
        <input
          className="input-field"
          defaultValue={data.phone}
          name="phone"
          onChange={onChange}
        ></input>
        <p className="input-title">message</p>
        <textarea
          className="text-field"
          defaultValue={data.message}
          name="message"
          onChange={onChange}
          rows="3"
        ></textarea>
      </form>
      <button
        onClick={() => {
          onSubmit();
        }}
        className="submit-contact-form-button">
        submit
      </button>
      <p className="thank-you-message">{thankYouMessage}</p>
    </div>
  );
}