reactjs - 将表单 POST 反应到 Express 服务器不起作用 - REST

Question

我正在尝试将HTML表单发布到 Express 服务器。当我使用REST 客户端时，POST 请求工作正常，并且数据被正确发送并在 DB 中注册。所以服务器端看起来不错。但是我的 React 代码不会发布任何东西。控制台中没有错误，并且输入值已正确定位。我已经尝试过原生 fetch 方法和 Axios，但两者都不起作用。我希望有人能帮助我，因为我对 REST api 还不是很熟悉。

这是我的表单组件：

import React, { useState } from "react";

import Header from "./Header";
import Footer from "./Footer";

const Form = () => {

{/* POST REQUEST */}

  const handleFormSubmit = (event) => {
    const name = event.target.elements.name.value;
    const description = event.target.elements.description.value;
    const email = event.target.elements.email.value;
    const number = event.target.elements.number.value;
    const website = event.target.elements.website.value;
    const social_media1 = event.target.elements.social_media1.value;

    fetch("http://192.168.1.101:7777/form", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: name,
        description: description,
        email: email,
        number: number,
        website: website,
        social_media1: social_media1,
      }),
    })
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .catch((error) => console.log(error));
  };

  return (
    <>

{/* SOME PAGE STUFF */}

      <Header />
      <div className="formTitle">
        <h3>Create your artist page</h3>
        <p>Some fields are required</p>
      </div>

{/* HTML FORM */}

      <form onSubmit={handleFormSubmit} className="form">

        <div>
          <legend>About you</legend>
          {/* NAME */}
          <label htmlFor="name">
            Artist name <span className="required">required</span>
          </label>
          <input
            type="text"
            id="name"
            name="name"
            required
            placeholder="Oasis"
          />
        </div>

        <div>
          {/* DESCRIPTION */}
          <label htmlFor="description">
            Description <span className="required">required</span>
          </label>
          <textarea
            rows="5"
            type="text"
            id="description"
            name="description"
            required
            placeholder="Insert a short description here"
          ></textarea>
        </div>

        <div>
          <legend>Contact</legend>
          {/* EMAIL */}
          <label htmlFor="email">
            Email address <span className="required">required</span>
          </label>
          <input
            type="email"
            id="email"
            name="email"
            required
            placeholder="[e-mail]"
          />
          {/* NUMBER */}
          <label htmlFor="number">Phone number </label>
          <input
            type="text"
            id="number"
            name="number"
            required
            placeholder="[phone]"
          />
          {/* WEBSITE */}
          <label htmlFor="website">Website </label>
          <input
            type="text"
            id="website"
            name="website"
            required
            placeholder="https://oasis.com"
          />
        </div>

        <div>
          <legend>Social media</legend>
          {/* SOCIAL LINK 1 */}
          <label htmlFor="social_media1">
            Social media link 1 <span className="required">required</span>
          </label>
          <input
            type="text"
            id="social_media1"
            name="social_media1"
            required
            placeholder="https://instagram.com/oasis"
          />
        </div>

        <button className="submit" type="submit">
          Submit
        </button>

      </form>

      <div className="temp"></div>

      <Footer />
    </>
  );
};

export default Form;

标签： reactjsrestpostrequestfetch

Answer 1

你可以试试这个方法：

const form_Data = new FormData(event.target);
const finalData = {};

for (let [key, value] of form_Data.entries()) {
   finalData[key] = value;
}
console.log(finaldata);

fetch("http://192.168.1.101:7777/form", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: finaldata
})
  .then((response) => {
    console.log(response);
    return response.json({response);
  })
  .catch((error) => console.log(error));

};

首先，您应该将所有表单数据转换为new FormData您可以将此对象传递给您的 fetchPOST方法

我认为这应该是工作。