React+Express应用提交表单时添加空对象问题求助

开发React+Express待办项目清单应用时，点击添加按钮弹出成功提示，但实际添加到数组的是空对象，而非用户输入的表单信息。

错误原因 #

• 前后端字段大小写不匹配：前端fetch请求传递的字段是TITLE/DESCRIPTION/URL（大写开头），但后端接口读取的是req.body.id/req.body.title（小写），且前端未传递ID字段。
• 前端状态更新逻辑错误：FormData组件中setContent(response.copyContent)无效，后端未返回copyContent字段；同时App组件的全局状态未同步更新新添加的项目。
• 后端变量未声明：response变量未用let/const声明，属于全局变量，存在潜在风险。

修复后的代码 #

server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;
const bodyParser = require('body-parser');

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

let webProjects = [
  {
    ID: 1,
    TITLE: "React Game",
    DESCRIPTION: "Tic tac toe game created using Create React App",
    URL: "http://someURL/myapp/game/",
  },
  {
    ID: 2,
    TITLE: "Online Store",
    DESCRIPTION: "Online store created with HTML, CSS and Javascript.",
    URL: "http://someURL2/shop/index",
  },
  {
    ID: 3,
    TITLE: "Online Store",
    DESCRIPTION: "Online store created with HTML, CSS and Angular.",
    URL: "http://someURL3/shop2/index",
  }
];

app.get("/api", (req, res) => {
  res.json({ webProjects });
});

app.post("/api/create", (req, res) => {
  const newProject = {
    ID: req.body.ID,
    TITLE: req.body.TITLE,
    DESCRIPTION: req.body.DESCRIPTION,
    URL: req.body.URL,
  };

  webProjects.push(newProject);
  res.json(newProject);
});

app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`);
});

FormData.js

import React, { useState } from 'react';

function FormData({ onProjectAdded }) {
  const [ID, setID] = useState("");
  const [TITLE, setTITLE] = useState("");
  const [DESCRIPTION, setDESCRIPTION] = useState("");
  const [URL, setURL] = useState("");

  const create = async (e) => {
    e.preventDefault();
    const newProject = { ID, TITLE, DESCRIPTION, URL };
    try {
      const response = await fetch("/api/create", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(newProject),
      });
      const data = await response.json();
      alert("A new item has been added");
      onProjectAdded(data);
      // 清空表单
      setID("");
      setTITLE("");
      setDESCRIPTION("");
      setURL("");
    } catch (err) {
      console.error("Error adding project:", err);
    }
  };

  return (
    <div>
      <form onSubmit={create}>
        <label>
          ID:
          <input
            name="ID"
            id="id"
            type="text"
            value={ID}
            onChange={(e) => setID(e.target.value)}
            required
          />
        </label>
        <label>
          Title:
          <input
            name="TITLE"
            id="title"
            type="text"
            value={TITLE}
            onChange={(e) => setTITLE(e.target.value)}
            required
          />
        </label>
        <label>
          Description:
          <input
            name="DESCRIPTION"
            id="description"
            type="text"
            value={DESCRIPTION}
            onChange={(e) => setDESCRIPTION(e.target.value)}
            required
          />
        </label>
        <label>
          URL:
          <input
            name="URL"
            id="url"
            type="text"
            value={URL}
            onChange={(e) => setURL(e.target.value)}
            required
          />
        </label>
        <button className='add-btn' type="submit">Add</button>
      </form>
    </div>
  );
}

export default FormData;

App.js

import React, { useEffect, useState } from 'react';
import { TableData } from './components/TableData';
import FormData from './components/FormData';

function App() {
  const [content, setContent] = useState({ webProjects: [] });

  useEffect(() => {
    fetchProjects();
  }, []);

  const fetchProjects = async () => {
    try {
      const response = await fetch("/api", {
        method: "GET",
        headers: {
          "Content-type": "application/json",
        }
      });
      const data = await response.json();
      setContent(data);
    } catch (err) {
      console.error("Error fetching projects:", err);
    }
  };

  const handleProjectAdded = (newProject) => {
    setContent(prev => ({
      webProjects: [...prev.webProjects, newProject]
    }));
  };

  return (
    <div>
      <TableData projectData={content.webProjects} />
      <FormData onProjectAdded={handleProjectAdded} />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Jay