I have a mern project where I want to Update user details using Reactjs page. I have successfully fetched data from database and after clicking Edit button i want to update data.
My problem--> After clicking update button it goes to home page but data is not updating and there is error like this in my browser console
Error: Request failed with status code 404
createError createError.js:16
settle settle.js:17
onl oadend xhr.js:66
dispatchXhrRequest xhr.js:80
xhrAdapter xhr.js:15
dispatchRequest dispatchRequest.js:58
request Axios.js:108
method Axios.js:140
wrap bind.js:9
onSubmit AdminUdateForm.js:51
React 14
unstable_runWithPriority scheduler.development.js:468
React 15
js index.js:8
js main.chunk.js:14300
I have checked all the URLs several times. i am trying this from the past 1 week but till now same error every time. please tell how to get rid of this. please review my code...
I think the error is about the reactjs page
I have tried all the previously asked questions but none of them helped me
auth.js
app.use('/edit', router);
router.route('/edituser/:id').get(function (req, res) {
let id = req.params.id;
console.log(id);
User.findById(id, function (err, student) {
res.json(student);
});
});
router.route('/updateuser/:id').post(function (req, res) {
User.findById(req.params.id, function (err, userdata) {
if (!userdata)
return next(new Error('Unable To Find Employee With This Id'));
else {
userdata.names = req.body.names;
userdata.phone = req.body.phone;
userdata.save().then(emp => {
res.json('Employee Updated Successfully');
})
.catch(err => {
res.status(400).send("Unable To Update Employee");
});
}
});
});
frontend page
class Admin extends Component {
constructor(props) {
super(props);
this.onChangenames = this.onChangenames.bind(this);
this.onChangephone = this.onChangephone.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
names: "",
phone: "",
};
}
onChangenames(e) {
this.setState({
names: e.target.value,
});
}
onChangephone(e) {
this.setState({
phone: e.target.value,
});
}
onSubmit(e) {
e.preventDefault();
const obj = {
names: this.state.names,
phone: this.state.phone,
};
console.log(obj);
axios.post('/updateuser/' this.props.match.params.id, obj)
.then((res) => console.log(res.data)).catch((err) => {
console.log(err);
});
this.props.history.push("/");
}
render() {
return (
<>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">
Company name
</a>
<button
class="navbar-toggler position-absolute d-md-none collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<input
class="form-control form-control-dark w-100"
type="text"
placeholder="Search"
aria-label="Search"
/>
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">
Sign out
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav
id="sidebarMenu"
class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
>
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a
class="link-secondary"
href="#"
aria-label="Add a new report"
>
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="alert alert-dark mt-5" role="alert">
Update user profile!!!
</div>
{/* --------------------------------------- */}
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-6 p-4">
<form onSubmit={this.onSubmit} method="post">
<div class="row mb-4">
<div class="form-outline mb-4">
<label class="form-label" for="form3Example3">
Identity
</label>
<input
type="text"
id="form3Example3"
name="names"
class="form-control"
value={this.state.names}
onChange={this.onChangenames}
/>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="form3Example3">
Name
</label>
<input
type="text"
id="form3Example3"
class="form-control"
name="phone"
value={this.state.phone}
onChange={this.onChangephone}
/>
</div>
<button
type="submit"
class="btn btn-primary btn-block mb-4"
value="update user"
>
Update Profile
</button>
</form>
</div>
</div>
</div>
</main>
</div>
</div>
</>
);
}
}
export default withRouter(Admin);
Please help!!...Thankyou
CodePudding user response：
your backend will accept request on "/edit/${url}". at your frontend change. axios.post('/updateuser/' blabla) to axios.post('edit/updateuser/' blabla)
CodePudding user response：
at server.
if (!userdata)
return next(new Error('Unable To Find Employee With This Id'));
else {
let variable = userdata;
variable.names = req.body.names;
variable.phone = req.body.phone;
// variable.save().then(emp => {
// res.json('Employee Updated Successfully');
//});
User.findByIdAndUpdate(variable._id, variable).then( emp => {
res.json('Employee Updated Successfully');
}
);
is userdata changeable? I mean userdata.names is not re-assignable, try storing the userdata into a variable first then check if error goes.