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

Question

我试图在 react 中编辑表单，但出现“PUT http://localhost:4000/api/update/user/10 404（未找到）”的问题。这是我的前端和后端代码。 我正在使用 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, gender, email, address, number, website, id],
    (err, result) => {
      if (err) {
        res.send(err);
        console.log(err);
      } else {
        res.send(result);
        console.log(result);
      }
    }
  );
});

Answer 1

你忘记了冒号前的斜线:

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