React.js App SyntaxError: JSON.parse: JSON 数据第 1 行第 1 列出现意外字符答案

【问题标题】：React.js App SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON dataReact.js App SyntaxError: JSON.parse: JSON 数据第 1 行第 1 列出现意外字符
【发布时间】：2023-02-08 14:11:33
【问题描述】：

在服务器上部署 react.js 应用程序后，我在标题中的联系人表单中出现错误。在本地主机上，表单可以正常工作，没有任何错误。单击窗体上的 sumbit 按钮后就会出现问题。然后你可以在控制台中看到错误。你们有没有看到下面代码中的任何错误？我在哪里可以找到解决此错误的方法？

联系页面的实时版本

Contact page

ContactForm.js

const ContactForm = () => {
  const [status, setStatus] = useState("Submit");
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("Sending...");
    const { name, email, subject, business, datetime, launch, message } = e.target.elements;
    let details = {
      name: name.value,
      email: email.value,
      subject: subject.value,
      business: business.value,
      datetime: datetime.value,
      launch: launch.value,
      message: message.value,
    };
    let response = await fetch("https://delightart.co/send", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    setStatus("Submit");
    let result = await response.json();
    alert(result.status);
  };

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

那是因为fetch的响应体不是JSON格式的，所以当你使用response.json()，它抛出了错误。所以你需要确定response是否是JSON，要么不调用response.json()直接使用，要么在后端服务中使用JSON.stringify()将数据转成JSON格式再发送。

你可以在 MDN https://developer.mozilla.org/en-US/docs/Web/API/Response 中查看 Response api。

而response.json()继承自body.json()，所以你可以查看更多细节。 https://developer.mozilla.org/en-US/docs/Web/API/Body/json

【讨论】：