reactjs+springboot修改表格报错：PUT http://localhost:3000/xxx 405 (Method Not Allowed)

Question

用MyBatis update方法修改数据，页面报错：
PUT http://localhost:3000/xxx 405 (Method Not Allowed)
SpringBoot后台报错：
WARN 12144 --- [nio-8080-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'PUT' not supported]

下面是代码：

 class StaffEdit extends Component {

  emptyItem = {
    name: '',
    address: '',
    city: '',
    stateOrProvince: '',
    country: '',
    postalCode: ''
  };

  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 staffAO = await (await fetch(`/api/staff/${this.props.match.params.id}`)).json();
      this.setState({item: staffAO});
    }
  }

  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/staff', {
      method: (item.id) ? 'PUT' : 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(item),
    });
    this.props.history.push('/staffs');
  }

  render() {
    const {item} = this.state;
    const title = <h2>{item.id ? 'Edit Staff' : 'Add Staff'}</h2>;

    return <div>
      <AppNavbar/>
      <Container>
        {title}
        <Form onSubmit={this.handleSubmit}>
          <FormGroup>
            <Label for="name">Name</Label>
            <Input type="text" name="name" id="name" value={item.name || ''}
                   onChange={this.handleChange} autoComplete="name"/>
          </FormGroup>
          <FormGroup>
            <Label for="department">Department</Label>
            <Input type="text" name="department" id="department" value={item.department || ''}
                   onChange={this.handleChange} autoComplete="Chemistry"/>
          </FormGroup>
          <FormGroup>
            <Label for="position">Position</Label>
            <Input type="text" name="position" id="position" value={item.position || ''}
                   onChange={this.handleChange} autoComplete="unknown"/>
          </FormGroup>
          <div className="row">
            <FormGroup className="col-md-4 mb-3">
              <Label for="permission">Permission</Label>
              <Input type="text" name="permission" id="permission" value={item.permission || ''}
                     onChange={this.handleChange} autoComplete="all"/>
            </FormGroup>
          </div>
          <FormGroup>
            <Button color="primary" type="submit">Save</Button>{' '}
            <Button color="secondary" tag={Link} to="/staffs">Cancel</Button>
          </FormGroup>
        </Form>
      </Container>
    </div>
  }
}

export default withRouter(StaffEdit);

 public class StaffManagementController {
    private StaffManagementFunction function;
    private final org.slf4j.Logger log = LoggerFactory.getLogger(StaffManagementController.class);

    public StaffManagementController(StaffManagementFunction function) {
        this.function = function;
    }

    @PutMapping("/staff/{id}")
    ResponseEntity<StaffManagement> editStaff(@PathVariable Long id, @Valid @RequestBody StaffManagementArgumentObject staffAO) throws Exception {
        staffAO.setId(id);
        log.info("Request to update staff: {}", staffAO);
        StaffManagement result = function.updateStaff(staffAO);
        return ResponseEntity.ok().body(result);
    }

Controller测试过可以修改数据库，但是用页面调用就报错，新手请高手指教！谢谢了！

Answer 1

应该是你的submit方法里面使用了put传参，但是url的id没有整进去，没找到正确的接口吧