PUT http://localhost:4000/api/update/user/10 404未找到

如何解决PUT http://localhost:4000/api/update/user/10 404未找到

我试图在 react 中编辑表单，但出现问题，提示“PUT http://localhost:4000/api/update/user/10 404 (Not Found)”。这是我的前端和后端代码。 我正在使用 react、node 和 MysqL。谁能找到问题，我尝试安装 cors，但它没有解决我的问题。

编辑用户 -

const EditUser = () => {
  let history = useHistory();
  const { id } = useParams();
  const [user,setUser] = useState({
    name: "",gender: "",number: "",address: "",email: "",phone: "",website: "",});

  const { name,gender,email,address,number,website } = user;
  const onInputChange = (e) => {
    setUser({ ...user,[e.target.name]: e.target.value });
  };

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

  const onSubmit = async (e) => {
    e.preventDefault();
    axios
      .put(`http://localhost:4000/api/update/user/${id}`,{
        name: name,email: email,address: address,number: number,website: website,gender: gender,})
      .catch(() => {});
    history.push("/");
  };

  const loadUser = async () => {
    const result = await axios.get(`http://localhost:4000/api/get/user/${id}`);
    setUser(result.data);
    console.log(result.data);
  };
  return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5">
        <h2 className="text-center mb-4">Edit A User</h2>
        <form onSubmit={(e) => onSubmit(e)}>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Name"
              name="name"
              value={name}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div class="form-check form-check-inline mb-3">
            <input
              class="form-check-input"
              type="radio"
              value="Male"
              name="gender"
              onChange={(e) => onInputChange(e)}
            />
            <label class="form-check-label">male</label>
          </div>
          <div class="form-check form-check-inline mb-3">
            <input
              class="form-check-input"
              type="radio"
              value="Female"
              name="gender"
              onChange={(e) => onInputChange(e)}
            />
            <label class="form-check-label">female</label>
          </div>
          <div className="form-group">
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter Your Address"
              name="address"
              value={address}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="email"
              className="form-control form-control-lg"
              placeholder="Enter Your E-mail Address"
              name="email"
              value={email}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="number"
              className="form-control form-control-lg"
              placeholder="Enter Your Phone Number"
              name="number"
              value={number}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className="form-group">
            <input
              type="website"
              className="form-control form-control-lg"
              placeholder="Enter Your Website Name"
              name="website"
              value={website}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <button className="btn btn-warning btn-block">Update User</button>
        </form>
      </div>
    </div>
  );
};

export default EditUser;

这是编辑/更新查询的服务器端代码。 服务器代码 -

app.put("/api/update/user:id",(req,res) => {
  const id = req.params.id;
  const name = req.body.name;
  const gender = req.body.gender;
  const email = req.body.email;
  const address = req.body.address;
  const number = req.body.number;
  const website = req.body.website;
  const sqlUpdate =
    "UPDATE `emplyee_details` SET (name=?,gender=?,email=?,address=?,number=?,website=?) WHERE id=?";
  db.query(
    sqlUpdate,[name,website,id],(err,result) => {
      if (err) {
        res.send(err);
        console.log(err);
      } else {
        res.send(result);
        console.log(result);
      }
    }
  );
});

解决方法

你忘记了冒号前的斜线 :

app.put("/api/update/user/:id",(req,res) => {