Javascript删除不会触发Java后端

Question

我正在开发一个带有React前端和Java后端(Spring )的应用程序。我有一个按钮在前端，应该删除我的实体。当我单击它时，它会从UI中删除它，但它仍然存在于后端。当我刷新页面时，它就会再次出现。有人注意到我做错了什么吗？

编辑:后端和前端反应的唯一地方是我在后端有CrossOrigin的地方。每个方法都有这样的方法吗？还是我不应该这么做？另外，我认为后端API的功能是正确的。在通过邮递员进行测试时，一切都正常工作，但是没有任何东西是从反应前端触发的。

编辑2:假设我通过邮递员发布了一个id为3的啤酒。所以当我在remove函数的控制台中打印id时，它是3，但是我得到了错误删除http://localhost:3000/api/homebrews/$7 7BbeerId%7D/ 404 (找不到)。为什么它将id从3转换为$%7BbeerId%7D？严格来说是一样的吗？

Homebrews.js

import * as React from 'react';
import './Homebrews.css';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';

class Homebrews extends React.Component{

  constructor(props) {
    super(props);

    this.state = {
      beers: [],
      isLoading: false
    };

    this.remove = this.remove.bind(this);
  }

  componentDidMount() {
    this.setState({isLoading: true});

    fetch('http://localhost:8082/homebrews')
      .then(response => response.json())
      .then(data => this.setState({beers: data, isLoading: false}));
  }

  async remove(id) {
      await fetch('/homebrews/${id}', {
        method: 'DELETE',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      }).then(() => {
        let updatedBeers = [...this.state.beers].filter(i => i.id !== id);
        this.setState({beers: updatedBeers});
      });
    }

  render() {
    const {beers, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div className="Brew-Data">
        <h2>Homebrew List</h2>
        {beers.map((beer: Homebrews) =>
        <div key={beer.id} className="Square">
          <div key={beer.id} className="Data">
            <h2>{beer.beerName}</h2>
            <Button size="sm" color="danger" onClick={() => this.remove(beer.id)}>Delete</Button>
          </div>
        </div>
        )}
      </div>
    );
  }
}

export default Homebrews;

HomebrewController.java

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class HomebrewController {

@Autowired
private HomebrewService hbService;

@RequestMapping("/homebrews")
@CrossOrigin(origins = "http://localhost:3000")
public List<HomebrewBeer> getAllBeers() {
    return hbService.getAllBeers();
}

@RequestMapping("/homebrews/{id}")
public HomebrewBeer getBeer(@PathVariable String id) {
    return hbService.getBeer(id);
}

@RequestMapping(method = RequestMethod.POST, value="/homebrews")
public void addBeer(@RequestBody HomebrewBeer beer) {
    hbService.addBeer(beer);
}

@RequestMapping(method = RequestMethod.PUT, value="/homebrews/{id}")
public void updateBeer(@RequestBody HomebrewBeer beer, @PathVariable String id) {
    hbService.updateBeer(beer, id);
}

@RequestMapping(method = RequestMethod.DELETE, value="/homebrews/{id}")
public void deleteBeer(@PathVariable String id) {
    hbService.deleteBeer(id);
}

HomebrewService.java

import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class HomebrewService {

@Autowired
HomebrewRepository repository;

public List<HomebrewBeer> getAllBeers() {
    List<HomebrewBeer> beers = new ArrayList<HomebrewBeer>();
    repository.findAll().forEach(beers::add);
    return beers;
}

public HomebrewBeer getBeer(String id) {
    return repository.findOne(id);
}

public void addBeer(HomebrewBeer beer) {
    repository.save(beer);
}

public void updateBeer(HomebrewBeer beer, String id) {
    repository.save(beer);
}

public void deleteBeer(String id) {
    repository.delete(getBeer(id));
}
}

HomebrewRepository.java

import org.springframework.data.repository.CrudRepository;



public interface HomebrewRepository extends CrudRepository<HomebrewBeer, 
String> {

}

Homebrew.java

import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
public class HomebrewBeer {

@Id
private String beerId;
private String beerName;
private String beerStyle;
private String description;
private Boolean usedOnlineRecipe;
private double abv, originalGravity, finalGravity, specificGravity;

public HomebrewBeer() {}

public HomebrewBeer(String beerId, String beerName, String beerStyle, Boolean 
usedOnlineRecipe, String description,
                    double abv, double originalGravity, double finalGravity, 
double specificGravity) {

    this.beerId = beerId;
    this.beerName = beerName;
    this.beerStyle = beerStyle;
    this.usedOnlineRecipe = usedOnlineRecipe;
    this.description = description;
    this.abv = abv;
    this.originalGravity = originalGravity;
    this.finalGravity = finalGravity;
    this.specificGravity = specificGravity;
}

public void setBeerId(String beerId) {
    this.beerId = beerId;
}

public void setBeerName(String beerName) { this.beerName = beerName; };

public void setBeerStyle(String beerStyle) {
    this.beerStyle = beerStyle;
}

public void setUsedOnlineRecipe(Boolean usedOnlineRecipe) {
    this.usedOnlineRecipe = usedOnlineRecipe;
}

public void setDescription(String description) {
    this.description = description;
}

public void setAbv(double abv) {
    this.abv = abv;
}

public void setOriginalGravity(double originalGravity) {
    this.originalGravity = originalGravity;
}

public void setFinalGravity(double finalGravity) {
    this.finalGravity = finalGravity;
}

public void setSpecificGravity(double specificGravity) {
    this.specificGravity = specificGravity;
}

public String getBeerId() {
    return beerId;
}

public String getBeerName() { return beerName; };

public String getBeerStyle() {
    return beerStyle;
}

public Boolean getUsedOnlineRecipe() {
    return usedOnlineRecipe;
}

public String getDescription() {
    return description;
}

public double getAbv() {
    return abv;
}
public double getOriginalGravity() {
    return originalGravity;
}

public double getFinalGravity() {
    return finalGravity;
}

public double getSpecificGravity() {
    return specificGravity;
}

Answer 1

这里有不正确的模板文字语法：

await fetch('/homebrews/${id}', {

因此，以上改为：

await fetch(`/homebrews/${id}`, {