Javascript删除不会触发Java后端

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

编辑：后端和前端反应的唯一位置是后端中有交叉原点的位置。每种方法都有这样的方法吗？或者我甚至不应该这样做？此外，我认为后端API功能正确。当通过邮递员进行测试时，一切都正常工作，但没有任何东西从react前端触发

编辑2：假设我通过一个id为3的邮递员邮寄了一瓶啤酒。因此，当我在remove函数的控制台中打印id时，它是3，但随后我得到了错误DELETE$%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;

这里的语法不正确：

wait fetch（'/homebrews/${id}'{

因此，将上述内容更改为：

wait fetch（`/homebrews/${id}`{

您的后端API成功删除记录了吗？您可以发布自制类吗？您也可以将id传递给删除函数您不必传递自制对象1。检查浏览器网络它调用正确的API url并返回200。2.您需要调试后端是否正常工作，并且删除值您还需要efine@Transactional for DAO层删除数据我的后端API工作正常，我已经用postman和它的fine对它进行了测试。但是当我尝试从前端删除时，它不工作。我现在也将发布自制类。我有点困惑，这不是我目前拥有的吗？对不起，只是想澄清一下！@alexaggs backquote是`，so这不是你目前拥有的。但是我真的不知道你为什么应该拥有，这可能不是问题所在。`/homebrews/${id}`，请注意引号中的小差异。这样模板参数将被替换。使用单引号不会发生这种情况。如果您将传入的id记录到服务器端，您将看到它可能是

${id}

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);
}

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));
}
}

import org.springframework.data.repository.CrudRepository;



public interface HomebrewRepository extends CrudRepository<HomebrewBeer, 
String> {

}

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;
}