Итак, у меня есть компонент React, который называется UpdateJobComponent. Отсюда пользователь может либо обновить задание, либо создать задание (в зависимости от кнопки, которую он щелкнул в предыдущем компоненте). Обновление задания работает нормально, однако, когда я пытаюсь создать работу, я получаю следующие ошибки:
Ошибки
Put http://localhost : 8080 / jobs / -1 500
Uncaught (в обещании) Ошибка: запрос не выполнен с кодом состояния 500 при createError
Он сообщает, что это запрос PUT, а не Почта. Однако я подумал, что правильно сказал, чтобы он соответствовал контроллеру createJob PostMapping. Ниже приведен код UpdateJobComponent, а также служебные файлы и контроллер, а также JobDataService.
. Я совершенно уверен, что метод updateJob в моем JobController получает POST и вот почему я получаю проблему, но я не могу понять, как заставить createJob в JobController получить его.
Если вы хотите больше увидеть код, просто дайте мне знать, я постарался урезать его настолько, насколько это возможно, чтобы не слишком долго просматривать! Буду очень признателен за любую помощь, которую вы можете предложить!
UpdateJobComponent
// imports
class UpdateJobComponent extends Component {
constructor(props) {
super(props)
this.state = {
id: this.props.match.params.id,
employer: this.props.match.employer,
description: ''
}
// bind methods
}
componentDidMount() {
if (this.state.id == -1) {
console.log("Not mounting")
return;
}
console.log(this.state.id)
console.log("mounting")
let userName = AuthenticationService.getLoggedUser()
JobDataService.retrieveJob(userName, this.state.id)
.then(response => this.setState({
description: response.data.description,
employer: response.data.employer,
jobTitle: response.data.jobTitle
}))
}
// Error handling for form
validate(values) {
let errors = {} // add validation for every field!!!!!!
if (!values.description) {
errors.description = 'Enter a description'
} else if (values.description.length < 5) {
errors.description = 'Description must be at least 5 characters long'
}
return errors
}
// When save is clicked
onSubmit(values) {
// let employer = this.state.employer
// let id = this.state.id
// let jobTitle = this.state.jobTitle
let job = {
id: this.state.id,
employer: values.employer,
jobTitle: values.jobTitle,
description: values.description
}
if (this.state.id === -1) {
JobDataService.createJob(job)
.then(() => this.props.history.push('/jobs'))
} else {
JobDataService.updateJob(job.jobTitle, job.employer, this.state.id, job)
.then(() => this.props.history.push('/jobs'))
}
}
render() {
let { description, employer, jobTitle } = this.state
return (
<div>
<h3>Update {this.state.employer}'s {this.state.jobTitle} Job</h3>
<div className="container">
<Formik
initialValues={{description: description, employer: employer, jobTitle: jobTitle}}
onSubmit={this.onSubmit}
validateOnChange={false}
validateOnBlur={false}
validate={this.validate}
enableReinitialize={true}
>
{
(props) => (
<Form>
// Formik form, removed to make post smaller...
<div className="btn-group mr-2" role="group" aria-label="First group">
<button className="btn btn-success" type="submit">Save</button>
</div>
JobDataService
// imports
const API_URL = 'http://localhost:8080'
const GET_ALL_JOBS_URL = `${API_URL}/jobs/`
updateJob(jobTitle, employer, id, job) {
return axios.put(`${GET_ALL_JOBS_URL}${id}`, job);
}
createJob(job) {
return axios.post(`${GET_ALL_JOBS_URL}`, job);
}
JobController
@Autowired
private JobService jobService;
@PostMapping("/jobs/")
public ResponseEntity<Job> createJob(@RequestBody Job job) {
Job createdJob = jobService.createJob(job);
java.net.URI uri = ServletUriComponentsBuilder.fromCurrentRequest().path("/{id}").buildAndExpand(createdJob.getId())
.toUri();
return ResponseEntity.created(uri).build();
}
@PutMapping("/jobs/{id}")
public ResponseEntity<Job> updateJob(@PathVariable long id, @RequestBody Job job) {
job.setId(id);
return ResponseEntity.ok().body(this.jobService.updateJob(job));
}
// Other get and delete methods
JobService
public Job createJob(Job job) {
if(job.getId() == -1 || job.getId() == 0) {
job.setId(++idCounter);
jobRepository.insert(job);
}
return jobRepository.save(job);
}
public Job updateJob(Job job) {
Optional < Job > jobDb = this.jobRepository.findById(job.getId());
if (jobDb.isPresent()) {
Job jobUpdate = jobDb.get();
jobUpdate.setId(job.getId());
jobUpdate.setEmployer(job.getEmployer());
jobUpdate.setJobTitle(job.getJobTitle());
jobUpdate.setDescription(job.getDescription());
jobRepository.save(jobUpdate);
return jobUpdate;
} else {
throw new ResourceNotFoundException("Record not found with id : " + job.getId());
}
}
// Other methods
Редактировать Полное сообщение об ошибке:
PUT http://localhost:8080/jobs/-1 500
dispatchXhrRequest @ 1.chunk.js:561
xhrAdapter @ 1.chunk.js:411
dispatchRequest @ 1.chunk.js:994
Promise.then (async)
request @ 1.chunk.js:807
Axios.<computed> @ 1.chunk.js:831
wrap @ 1.chunk.js:1308
updateJob @ main.chunk.js:1428
onSubmit @ main.chunk.js:955
(anonymous) @ 1.chunk.js:4699
(anonymous) @ 1.chunk.js:5014
(anonymous) @ 1.chunk.js:4709
Promise.then (async)
(anonymous) @ 1.chunk.js:4705
(anonymous) @ 1.chunk.js:5014
(anonymous) @ 1.chunk.js:4750
(anonymous) @ 1.chunk.js:5014
callCallback @ 1.chunk.js:16321
invokeGuardedCallbackDev @ 1.chunk.js:16370
invokeGuardedCallback @ 1.chunk.js:16423
invokeGuardedCallbackAndCatchFirstError @ 1.chunk.js:16438
executeDispatch @ 1.chunk.js:16569
executeDispatchesInOrder @ 1.chunk.js:16594
executeDispatchesAndRelease @ 1.chunk.js:16697
executeDispatchesAndReleaseTopLevel @ 1.chunk.js:16706
forEachAccumulated @ 1.chunk.js:16678
runEventsInBatch @ 1.chunk.js:16723
runExtractedPluginEventsInBatch @ 1.chunk.js:16865
handleTopLevel @ 1.chunk.js:21818
batchedEventUpdates$1 @ 1.chunk.js:40326
batchedEventUpdates @ 1.chunk.js:17401
dispatchEventForPluginEventSystem @ 1.chunk.js:21914
attemptToDispatchEvent @ 1.chunk.js:22031
dispatchEvent @ 1.chunk.js:21934
unstable_runWithPriority @ 1.chunk.js:51411
runWithPriority$2 @ 1.chunk.js:28193
discreteUpdates$1 @ 1.chunk.js:40343
discreteUpdates @ 1.chunk.js:17426
dispatchDiscreteEvent @ 1.chunk.js:21901