首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >PUT http://localhost:4000/api/update/user/10 404 (未找到)

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

Stack Overflow用户
提问于 2021-04-01 16:56:32
回答 1查看 63关注 0票数 0

我试图在react中编辑表单,但出现了"PUT http://localhost:4000/api/update/user/10 404 (Not Found)“的问题。这是我的前端和后端代码。我正在使用react,node和MySQL.Can,如果有人发现这个问题,我尝试安装cors,但它不能解决我的问题。

EditUser -

代码语言:javascript
运行
复制
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;

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

代码语言:javascript
运行
复制
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);
      }
    }
  );
});
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-01 17:00:28

您忘记了冒号:前面的斜杠

代码语言:javascript
运行
复制
app.put("/api/update/user/:id", (req, res) => {
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66901423

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档