做出反应。未处理的拒绝（TypeError）：无法读取未定义的属性“值”答案

【问题标题】：React. Unhandled Rejection (TypeError): Cannot read property 'value' of undefined做出反应。未处理的拒绝（TypeError）：无法读取未定义的属性“值”
【发布时间】：2021-09-16 04:29:00
【问题描述】：

你好请帮我将表格发送到电子邮件！

未处理的拒绝 (TypeError)：无法读取未定义的属性“值” const handleSubmit 出错

是源代码：

 const Form = () => {
  const classes = useStyles();
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      message: message.value,
    };
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };

【问题讨论】：

错误信息很清楚。你是如何调试这段代码的？
e.target.elements.name 为空；检查e.target.elements。

标签： javascript html json reactjs

【解决方案1】：

似乎：姓名、电子邮件和消息是undefined/null。我们需要查看您的渲染功能。（也许您忘记在输入中添加name 属性？）

您可以改用表单元素，并创建FormData：

const elements = new FormData(e.target);
const details = {
  name: elements.get("name"),
  email: elements.get("email"),
  message: elements.get("message"),
};

【讨论】：