React发布表单数据并从数据库呈现数据

import React, { useState } from "react";

function MyForm() {
  const [formData, setFormData] = useState({});

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 将数据发送给后端
    // 可以使用fetch或axios等库发送HTTP请求
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name || ""}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email || ""}
        onChange={handleChange}
      />
      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

const express = require("express");
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/submit", (req, res) => {
  const formData = req.body;
  // 将数据存储到数据库中
  // 可以使用Mongoose等库与数据库进行交互
  res.send("提交成功");
});

app.listen(3000, () => {
  console.log("服务器已启动");
});

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

function MyData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("/data") // 后端路由用于获取数据
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default MyData;