Удаление Javascript не запускает серверную часть Java

Я работаю над приложением с интерфейсом React и серверной частью Java (Spring boot). У меня есть кнопка на передней панели, которая должна удалить мою сущность. Когда я щелкаю по нему, он удаляет его из пользовательского интерфейса, но он все еще существует в серверной части. Когда я обновляю страницу, она снова появляется снова. Кто-нибудь заметил, что я делаю не так?

Обновлено: единственное место, где реагируют серверная часть и передняя часть, - это то, где у меня есть CrossOrigin в бэкэнде. Есть ли способ использовать это для каждого метода? Или мне даже не нужно этого делать? Кроме того, я считаю, что серверный API работает правильно. Все работает правильно при тестировании через почтальона, но ничего не запускается из интерфейса реакции.

Изменить 2: Допустим, я отправляю пиво через почтальона с идентификатором 3. Поэтому, когда я печатаю идентификатор в консоли функции удаления, он равен 3, но затем я получаю сообщение об ошибке DELETE http: // локальный: 3000 / api / homebrews / $% 7BbeerId% 7D / 404 (Не обнаружена). Почему он переводит идентификатор с 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;
}