TSX+NodeJS CRUD项目：新建/更新用户无法删除求助

我正在开发一个基于TSX和Node.js的CRUD项目，通过JSON数据实现用户管理。目前删除功能仅对预写入JSON的用户有效，对新建或更新后的用户执行删除操作时，会出现以下错误：

Users.tsx:65
DELETE http://localhost:3000/user/26 404 (Not Found)

相关代码 #

删除操作代码 #

按钮触发逻辑：

<button onClick={(e) => handleDelete(users.id)} className="dlte-btn">

删除处理函数：

function handleDelete(id) {
  const Conf = window.confirm("Do you want to delete");
  if (Conf) {
    axios
      .delete("http://localhost:3000/user/" + id)
      .then((res) => {
        toast.error("User has been Deleted", { position: "top-right" });
        navigate("/");
      })
      .catch((err) => console.log(err));
  }
}

更新操作代码 #

逻辑部分：

const { id } = useParams();
const [data, setData] = useState([]);
const navigate = useNavigate();

function handleSubmit(event) {
  event.preventDefault();
  axios.put(`http://localhost:3000/user/` + id, data).then((res) => {
    alert("data update successfully!");
    navigate("/");
  });
}

ID输入框：

<input type="number"  min="1" placeholder="Enter ID" className="form-control" value={data.id} onChange={(e) => setData({ ...data, id: e.target.value })}/>

名称输入框：

<input type="text" placeholder="Enter Name" className="form-control" value={data.name} onChange={(e) => setData({ ...data, name: e.target.value })} />

创建操作代码 #

逻辑部分：

const [inputData, setInputData] = useState({ id: "", name: "" });
const navigate = useNavigate();

function Submit(event: { preventDefault: () => void }) {
  event.preventDefault();

  axios
    .post("http://localhost:3000/user", inputData)
    .then((res) => {
      toast.success("User Added Successfully", { position: "top-right" });
      navigate("/");
    })
    .catch((err) => console.log(err));
}

ID输入框：

<input type="number" min="1" placeholder="Enter ID" className="form-control" onChange={(e) => setInputData({ ...inputData, id: e.target.value })} />

名称输入框：

<input type="text" placeholder="Enter Name" className="form-control" onChange={(e) => setInputData({ ...inputData, name: e.target.value })}/>

服务端删除接口代码 #

app.delete("/user/:id", (req, res) => {
  try {
    const userId = parseInt(req.params.id);
    const userIndex = USERS.users.findIndex((user) => user.id === userId);
    if (userIndex === -1) {
      return res.status(404).send("User not found");
    }
    USERS.users.splice(userIndex, 1);
    res.status(200).json(USERS);
  } catch (error) {
    console.error(error);
    res.status(500).send("Internal Server Error");
  }
});

这是我的第一个TSX CRUD项目，找不到问题所在，希望删除功能对所有用户（包括新建和更新的用户）都能正常生效。

核心问题：ID类型不匹配 #

服务端删除接口通过parseInt(req.params.id)将ID转为数字类型，但新建/更新用户时，前端输入框的e.target.value默认是字符串类型，导致服务端findIndex无法匹配到对应用户，返回404。

具体修复步骤 #

1. 新建用户时统一ID类型
   修改创建操作的提交函数，将ID转为数字后再发送请求：

function Submit(event: { preventDefault: () => void }) {
  event.preventDefault();
  // 转换ID为数字类型
  const submitData = { ...inputData, id: parseInt(inputData.id) };
  axios
    .post("http://localhost:3000/user", submitData)
    .then((res) => {
      toast.success("User Added Successfully", { position: "top-right" });
      navigate("/");
    })
    .catch((err) => console.log(err));
}

2. 更新用户时同步ID类型
   修改更新操作的ID输入框事件，将输入值转为数字：

<input 
  type="number"  
  min="1" 
  placeholder="Enter ID" 
  className="form-control" 
  value={data.id} 
  onChange={(e) => setData({ ...data, id: parseInt(e.target.value) })}
/>

同时，useParams获取的ID是字符串，提交更新请求时也要转为数字：

function handleSubmit(event) {
  event.preventDefault();
  const updateData = { ...data, id: parseInt(data.id) };
  axios.put(`http://localhost:3000/user/${parseInt(id)}`, updateData).then((res) => {
    alert("data update successfully!");
    navigate("/");
  });
}

3. 确保列表渲染时ID类型一致
   从服务端获取用户列表后，检查每个用户的id类型，若为字符串则统一转为数字，避免渲染时传递字符串ID给删除函数。

4. 可选：服务端兼容处理
   如果不想修改前端，可在服务端增加类型兼容，同时匹配数字和字符串ID：

const userIndex = USERS.users.findIndex((user) => 
  user.id === userId || user.id.toString() === req.params.id
);

但更推荐前端统一传递数字ID，保持前后端数据类型一致性。

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