看跌http://localhost:4000/api/update/user/10404(未找到)

Question

我试图在react中编辑表单，但出现问题时说"看跌http://localhost:4000/api/update/user/10404(未找到("；。这是我的前端和后端代码。我正在使用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) => {