java - api方法,edit方法不能正常工作
问题描述
我正在尝试使用 Spring Boot 和 ReactJs 构建一个 CRUD 应用程序,但“编辑”方法出现了一些错误。当我尝试编辑用户时,我在网络选项卡中收到 404 错误,我设法在框中写入,当我想保存而不是编辑我选择的用户时,会添加一个新用户。“添加”方法可以正常工作,但我认为这是方法之间的重叠。我将在这里留下我的代码:
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';
class EmployeeList extends Component{
constructor(props) {
super(props);
this.state = {employees: []};
this.remove = this.remove.bind(this);
}
componentDidMount() {
fetch('/api/employee')
.then(response => response.json())
.then(data => this.setState({employees: data}));
}
async remove(id) {
await fetch(`/api/employee/${id}`, {
method: 'DELETE',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}).then(() => {
let updateEmployees = [...this.state.employees].filter(i => i.id !== id);
this.setState({employees: updateEmployees});
});
}
render() {
// const employee = this.state.employee.employee;
// const isLoading = this.isLoading;
const {employees, isLoading} = this.state;
// let employeeList;
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div>
<AppNavbar/>
<Container fluid>
<div className="float-right">
<Button color="success" tag={Link} to="/employee/new">Add employee</Button>
</div>
<h3>Employees</h3>
<Table className={"table-container"}>
<thead>
<tr>
<th >First Name</th>
<th >Last Name</th>
<th >Date of birth</th>
<th >Email</th>
<th >Age</th>
<th >Actions</th>
</tr>
</thead>
<tbody>
{employees.map(employee =><tr key={employee.id}>
<td style={{whiteSpace: 'nowrap'}}>{employee.first_name}</td >
<td>{employee.last_name}</td>
<td>{employee.date_of_birth}</td>
<td>{employee.email}</td>
<td>{employee.age}</td>
<td>
<ButtonGroup className={"actions-container"}>
<Button size="sm" color="primary" tag={Link} to={"/employee/" + employee.id}>Edit</Button>
<Button size="sm" color="danger" onClick={() => this.remove(employee.id)}>Delete</Button>
</ButtonGroup>
</td>
</tr>)}
</tbody>
</Table>
</Container>
</div>
);
}
}
export default EmployeeList;
-------------------------------------------
import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { Button, Container, Form, FormGroup, Input, Label } from 'reactstrap';
import AppNavbar from './AppNavbar';
class EmployeesEdit extends Component {
emptyItem = {
first_name: '',
last_name: '',
date_of_birth:'',
email : '',
};
constructor(props) {
super(props);
this.state = {
item: this.emptyItem
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
async componentDidMount() {
if (this.props.match.params.id !== 'new') {
const employee = await (await fetch(`/employee/${this.props.match.params.id}`)).json();
this.setState({item: employee});
}
}
handleChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let item = {...this.state.item};
item[name] = value;
this.setState({item});
}
async handleSubmit(event) {
event.preventDefault();
const {item} = this.state;
await fetch('/api/employee' + (item.id ? '/' + item.id : ''), {
method: (item.id) ? 'PUT' : 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item),
});
this.props.history.push('/employee');
}
render() {
const {item} = this.state;
const title = <h2>{item.id ? 'Edit Employee' : 'Add Employee'}</h2>;
return <div>
<AppNavbar/>
<Container >
{title}
<Form onSubmit={this.handleSubmit}>
<FormGroup class={"last-name-container"}>
<Label for="name">First Name</Label>
<Input className={"input-container"} type="text" name="first_name" id="first" value={item.first_name || ''}
onChange={this.handleChange} autoComplete="name"/>
</FormGroup>
<FormGroup class={"last-name-container"}>
<Label for="email">Last Name</Label>
<Input className={"input-container"} type="text" name="last_name" id="last" value={item.last_name || ''}
onChange={this.handleChange} autoComplete="email"/>
</FormGroup>
<FormGroup class={"last-name-container"}>
<Label for="email">Date of birth</Label>
<Input className={"input-container"} type="text" name="date_of_birth" id="date" value={item.date_of_birth || ''}
onChange={this.handleChange} autoComplete="email"/>
</FormGroup>
<FormGroup class={"last-name-container"}>
<Label for="email">Email</Label>
<Input className={"input-container"} type="text" name="email" id="email" value={item.email || ''}
onChange={this.handleChange} autoComplete="email"/>
</FormGroup>
<FormGroup>
<Button color="primary" type="submit" onClick={this.handleSubmit}>Save</Button>{' '}
<Button className={"btn-danger"} color="secondary" tag={Link} to="/employee">Cancel</Button>
</FormGroup>
</Form>
</Container>
</div>
}
}
export default withRouter(EmployeesEdit);
解决方案
尝试使用 - 更新您的后端代码
@PutMapping("/employee/{employee_Id}")
public void updateEmployee(PathVariable("employee_Id") Long employee_Id, @RequestParam(required = false) String first_name, @RequestParam(required = false) String last_name,@RequestParam(required = false) String email)
推荐阅读
- javascript - 配置说明不清楚
- apache-kafka - Advertising.listeners 和 bootstrap.servers 有什么区别?
- angular - X 不是 onClick 中的函数
- java - PotionEffect 仅在第一次应用
- matlab - 使用 Matlab 的深度学习工具箱进行多输入网络训练
- c++ - 在实例上调用时未找到模板类中的模板成员函数
- python - 为什么微调的 vgg-16 在相同的数据集上比微调的 inception-v3 表现更好?
- java - Liferay:当我们将动作一个 portlet 重定向到另一个 portlet 时,我们如何从表单中读取表单值?
- python - 仅在 Python 中被覆盖的类方法
- sql - SQL(特别是Oracle DB)中的“group by null”是什么意思?