[英]axios PUT, not updating data after form submit
I am having a problem with my PUT
method.我的PUT
方法有问题。 I am using axios and i want to update my "project".我正在使用 axios 并且我想更新我的“项目”。 For that I am using a form, passing all data and I am hitting my route /projects/update/5f0d5f963a82457bc418d03d
where last part is project ID that I am getting.为此,我正在使用一个表单,传递所有数据,然后我正在访问我的路线/projects/update/5f0d5f963a82457bc418d03d
,其中最后一部分是我得到的项目 ID。
So my UpdateProject component is nothing special here:所以我的 UpdateProject 组件在这里没什么特别的:
import React, { Component, Fragment } from 'react';
import axios from 'axios';
import Button from '../../common/Buttons/Button';
import Spinner from '../../common/Spinner/Spinner';
import { API_URL } from '../../../config';
import { isAuthUser } from '../../../utils/utils';
class ProjectUpdate extends Component {
state = {
formData: {
creator: '',
title: '',
description: '',
shortDescription: '',
photo: '',
tags: '',
projectType: '',
links: {},
},
displayLinks: false,
loading: false,
};
componentDidMount() {
this.ftechId();
}
ftechId = async () => {
this.setState({ loading: true });
try {
await axios
.get(`${API_URL}/projects/${this.props.match.params.projectId}`)
.then((res) =>
this.setState({
formData: res.data,
loading: false,
})
);
} catch (err) {
console.log(err);
}
};
updateProject = async (formData) => {
this.setState({ loading: true });
const { token } = isAuthUser();
const config = {
headers: {
Accept: 'application/json',
Authorization: `${token}`,
},
};
try {
console.log('formdata update', formData);
await axios
.put(
`${API_URL}/projects/update/${this.props.match.params.projectId}`,
formData,
config
)
.then((res) => console.log('res', res));
this.setState({ loading: false });
} catch (err) {
console.log(err);
}
};
onChange = (e) => {
// setting formData in the state properly
const { formData } = this.state;
let newFormData = { ...formData };
newFormData[e.target.name] = e.target.value;
this.setState({
formData: newFormData,
});
};
onSubmit = (e) => {
const { formData } = this.state;
const fileToUpload = document.querySelector('#photoID');
const sendData = new FormData();
sendData.append('title', formData.title);
sendData.append('description', formData.description);
sendData.append('photo', fileToUpload.files[0]);
sendData.append('tags', formData.tags);
sendData.append('projectType', formData.projectType);
sendData.append('shortDescription', formData.shortDescription);
sendData.append('git', formData.git);
sendData.append('demo', formData.demo);
sendData.append('creator', formData.creator);
console.log('sendData', formData.tags);
e.preventDefault();
this.updateProject(sendData);
};
toggleLinks = () => {
const { displayLinks } = this.state;
if (!displayLinks) {
this.setState({ displayLinks: true });
} else {
this.setState({ displayLinks: false });
}
};
renderProject = () => {
const {
loading,
displayLinks,
formData: {
title,
description,
shortDescription,
photo,
tags,
projectType,
links,
},
} = this.state;
console.log('state form', this.state.formData);
if (loading === true) {
return <Spinner />;
} else {
return (
<section className=''>
<h1 className=''>Update Project</h1>
<p className=''>
<i className='fas fa-user'></i> Add project information
</p>
<small>* = required field</small>
<form
encType='multipart/form-data'
className='form'
onSubmit={(e) => this.onSubmit(e)}>
<div className=''>
<select
name='projectType'
value={projectType}
onChange={this.onChange}>
<option value='0'>* Select Project Type Status</option>
<option value='Front-end'>Front-end</option>
<option value='Back-end'>Back-end</option>
<option value='MERN'>MERN</option>
<option value='Vanila JS'>Vanila JS</option>
<option value='html'>HTML/CSS</option>
</select>
<small className='form-text'>Select a project type.</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Title'
name='title'
value={title}
onChange={this.onChange}
/>
<small className='form-text'>Add project title.</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Description'
name='description'
value={description}
onChange={this.onChange}
/>
<small className='form-text'>Add project description</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='Short description'
name='shortDescription'
value={shortDescription}
onChange={this.onChange}
/>
<small className='form-text'>Add project short description</small>
</div>
<div className='form-group'>
<input
type='text'
placeholder='* Tags'
name='tags'
value={tags}
onChange={this.onChange}
/>
<small className='form-text'>
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
</small>
</div>
<div className='form-group'>
<input
id='photoID'
type='file'
accept='.jpg, .png, .jpeg'
placeholder='Photo'
name='photo'
// value={photo}
onChange={this.onChange}
/>
<small className='form-text'>Add project preview.</small>
</div>
<div className='my-2'>
<button onClick={this.toggleLinks} type='button' className=''>
Add Project Links
</button>
<span>Optional</span>
{displayLinks && (
<div>
<div className=''>
<i className=''></i>
<input
type='text'
placeholder='Git URL'
name='git'
value={links.git}
onChange={this.onChange}
/>
</div>
<div className=''>
<i className=''></i>
<input
type='text'
placeholder='Demo URL'
name='demo'
value={links.demo}
onChange={this.onChange}
/>
</div>
</div>
)}
</div>
<input type='submit' className='btn btn-primary my-1' />
<Button className='btn btn-light my-1' to='/projects'>
Go Back
</Button>
</form>
</section>
);
}
};
render() {
return <Fragment>{this.renderProject()}</Fragment>;
}
}
export default ProjectUpdate;
Here I am hitting projects/${this.props.match.params.projectId}
to get my project data.在这里,我点击projects/${this.props.match.params.projectId}
来获取我的项目数据。 I am appneding data to const sendData = new FormData();
我将数据附加到const sendData = new FormData();
and I want to send this do my mongoDB.我想发送这个做我的 mongoDB。 From my console.logs
all data is in state before my update and after update.从我的console.logs
日志中,所有数据在我更新之前和更新之后都在 state 中。 For update I am using this route:对于更新,我正在使用这条路线:
updateProject = async (formData) => {
this.setState({ loading: true });
const { token } = isAuthUser();
const config = {
headers: {
Accept: 'application/json',
Authorization: `${token}`,
},
};
try {
console.log('formdata update', formData);
await axios
.put(
`${API_URL}/projects/update/${this.props.match.params.projectId}`,
formData,
config
)
.then((res) => console.log('res', res));
this.setState({ loading: false });
} catch (err) {
console.log(err);
}
};
I am confused here because form my response that i have in Network tab on f12 I can see that headers are set to new value, but response itself is not changed as my data was never snet to db.我在这里感到困惑,因为从我在 f12 上的网络选项卡中的响应中,我可以看到标头设置为新值,但响应本身并没有改变,因为我的数据从未 snet 到 db。
So i start digging on my backend My route is nothing special here所以我开始挖掘我的后端我的路线在这里没什么特别的
router.put(
'/projects/update/:projectId',
authCheck,
isAdmin,
findProjectById,
update
);
I am checknig here if user is admin and have JWT token.如果用户是管理员并且拥有 JWT 令牌,我会在这里检查。 After i hit my update
在我点击update
后
exports.update = (req, res) => {
let form = new formidable.IncomingForm();
console.log(form);
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
if (err) {
return res
.status(400)
.json({ errors: [{ msg: 'Image could not be uploaded' }] });
}
// const { git, demo } = fields;
// fields.creator = req.user._id;
// fields.links = {};
// if (git) fields.links.git = git;
// if (demo) fields.links.demo = demo;
let project = req.project;
console.log('project', project);
console.log('req.proj', req.project);
//1kb = 1000
//1mb = 1000000kb
//name 'photo' mus match client side. use photo
if (files.photo) {
if (files.photo.size > 1000000) {
return res.status(400).json({
errors: [{ msg: 'Image could not be uploaded. File to big.' }],
});
}
//this relates to data in schema product
project.photo.data = fs.readFileSync(files.photo.path);
project.photo.contentType = files.photo.type;
}
console.log('project update', fields);
project.save();
return res.json(project);
});
};
Here from my console.logs
i can see that I am getting my project when i hit findProjectById, getProject
but it looks like all stops and not moving to update
从我的console.logs
中,我可以看到当我点击findProjectById, getProject
时我正在获取我的项目,但它看起来像所有停止并且没有移动到update
/* find project by id */
exports.findProjectById = async (req, res, next) => {
const id = req.params.projectId;
try {
let project = await Project.findById(id);
if (!project) return res.status(400).json({ msg: 'Porject not found' });
req.project = project;
next();
} catch (err) {
console.error(err.message);
if (err.kind === 'ObjectId') {
return res.status(400).json({ msg: 'Porject not found' });
}
res.status(500).send('Server Error');
}
};
My req.project
is returning project that I want to update and console.log('proejct update')
is returniong data that i want to send and save, but nothing is happening.我的req.project
正在返回我想要更新的项目,而console.log('proejct update')
正在返回我想要发送和保存的数据,但什么也没发生。 Not sure where to look, to get this working.不知道在哪里看,让这个工作。 I have check other similar issues here but nothing was working for me我在这里检查了其他类似的问题,但没有什么对我有用
Edit: After hitting update I am getting response 200 for my PUT
, there is no other error but data is not udated in DB My ${API_URL}/projects/update/${this.props.match.params.projectId}
matches my project Id and rout for update编辑:点击更新后,我的PUT
得到响应 200 ,没有其他错误,但数据库中的数据未更新我的${API_URL}/projects/update/${this.props.match.params.projectId}
与我的匹配用于更新的项目 ID 和路由
Mongoose save returns promise. Mongoose 保存返回 promise。 In the backend update
method, send the response in the then
block.在后端update
方法中,在then
块中发送响应。
...
project.save().then(() => res.json(project))
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.