api方法，edit方法不能正常工作

Question

我正在尝试使用 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);

Answer 1

尝试使用 - 更新您的后端代码

@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)