NextJS中编辑SQL行后，如何正确POST数据至后端？

你当前在Next.js中开发的编辑页面已经完成了目标数据行的加载，但前后端代码在提交逻辑上存在偏差，下面是针对性的修正方案：

一、前端代码优化 #

当前前端存在状态初始化、输入框绑定逻辑、提交处理等问题，修改后的代码如下：

import { React, useEffect, useState } from "react";
import { useRouter } from "next/router";
import axios from "axios";

export default function Edit() {
  // 初始状态改为空对象，匹配单条数据的结构
  const [data, setData] = useState({});
  const router = useRouter();

  const onSubmitHandler = async (e) => {
    e.preventDefault();
    try {
      // 提交修改后的数据，携带ID供后端定位目标行
      await axios.post("/api/cards", data);
      // 提交成功后的反馈与跳转，可根据需求调整
      alert("修改成功");
      router.push("/cards"); // 假设数据列表页路径为/cards
    } catch (err) {
      console.error("提交失败:", err);
      alert("修改失败，请重试");
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get("/api/cards");
        if (res.data) {
          // 用find替代map，更高效地匹配目标数据行
          const targetRow = res.data.find(element => element.ID === router.query.card);
          if (targetRow) setData(targetRow);
        }
      } catch (err) {
        console.error("获取数据失败:", err);
      }
    };
    if (router.isReady) fetchData();
  }, [router.isReady, router.query.card]);

  return (
    <form onSubmit={onSubmitHandler}>
      <label htmlFor="front">Front</label>
      {/* 改用value绑定状态，确保输入框与组件状态实时同步 */}
      <input
        value={data.Front || ""}
        id="front"
        onChange={(e) => setData({ ...data, Front: e.target.value })}
      />
      <label htmlFor="back">Back</label>
      <input
        value={data.Back || ""}
        id="back"
        onChange={(e) => setData({ ...data, Back: e.target.value })}
      />
      <button type="submit">保存修改</button>
    </form>
  );
}

前端修改要点 #

• 将初始状态从数组改为空对象，符合单条数据的存储需求
• 输入框改用value绑定状态，实现受控组件，确保状态与输入内容同步
• 提交逻辑增加异步处理与错误捕获，给用户明确的操作反馈
• 用find替代map查找目标数据，提升性能

二、后端代码修改 #

当前后端的POST逻辑是新增数据（INSERT），但你需要的是更新现有数据，修改后的代码如下：

if (req.method === "POST") {
  // 从请求体获取修改后的数据，保持与前端字段大小写一致
  const { Front, Back, ID } = req.body;

  // 使用参数化查询，彻底避免SQL注入风险
  const updateQuery = `UPDATE deck SET Front = ?, Back = ? WHERE ID = ?`;
  db.query(updateQuery, [Front, Back, ID], (err, result) => {
    if (!err) {
      // 检查是否有数据行被实际更新
      if (result.affectedRows > 0) {
        res.status(200).json({ message: "数据更新成功" });
      } else {
        res.status(404).json({ message: "未找到对应数据行" });
      }
    } else {
      console.error("更新数据失败:", err);
      res.status(500).json({ message: "服务器错误" });
    }
  });
}

后端修改要点 #

• 将INSERT语句改为UPDATE语句，实现数据更新逻辑
• 采用参数化查询，杜绝SQL注入漏洞
• 增加响应状态码区分不同结果（成功、未找到数据、服务器错误）
• 保持字段大小写与前端一致，避免数据解析错误

关键注意事项 #

1. 前后端字段名必须严格一致，避免因大小写或命名差异导致数据丢失
2. 永远不要用字符串拼接的方式编写SQL语句，参数化查询是安全操作数据库的基础
3. 前后端都要完善错误处理逻辑，给用户清晰的操作反馈

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