Я правильно выполняю эти запросы на выборку?

Question

У меня есть приложение, которое получает данные из API.Мне также нужно иметь возможность помещать новые данные в API и редактировать данные на основе номера идентификатора индекса.Я работаю так, но когда я обновляю или добавляю данные, он не виден, пока страница не обновится.Как мне просматривать данные на входе, а не обновлять страницу.

Я также должен закомментировать данные редактирования и добавлять новые функции данных, пока не захочу использовать их, чтобы эти запросы на выборпостоянно вставлять пустые данные в базу данных.Правильно ли я выполняю эти запросы на выборку или есть способ предотвратить выполнение запросов PUT и POST, пока они мне не понадобятся?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoaded: false,
    }
    this.editBeersLikes = this.editBeersLikes.bind(this);
    this.addNewBeer = this.addNewBeer.bind(this);
  }

  seeBeers() {
   return fetch("https://beer.fluentcloud.com/v1/beer/")//specify id number to show single beer ex. "https://beer.fluentcloud.com/v1/beer/99"
     .then(response => response.json())
     .then(responseJson => {
       this.setState({
         isLoaded: true,
         dataSource: responseJson,
       });
       return responseJson;
     })
     .catch(error => console.log(error)); //to catch the errors if any
 }

  addNewBeer() {
    fetch("https://beer.fluentcloud.com/v1/beer/", {
      body: "{\"name\":\"\",\"likes\":\"\"}",//input beer name and like amount ex "{\"name\":\"Michelob Ultra\",\"likes\":\"-5\"}"
      headers: {
        "Content-Type": "application/json"
      },
      method: "POST"
      })
      console.log("Beer Added!");
  }

  editBeersLikes() {
    fetch("https://beer.fluentcloud.com/v1/beer/99", {//must specify id number to edit a single beer's likes ex "https://beer.fluentcloud.com/v1/beer/99"
          body: "{\"likes\":\"\"}", //input amount of likes to edit ex "{\"likes\":\"22\"}"
          headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
          },
          method: "PUT"
          })
          console.log("Likes Successfully Updated!");
        }

        componentDidMount() {
          this.seeBeers();
          //this.editBeersLikes(); //uncomment when you want to edit likes 
          //this.addNewBeer();  //uncomment when you want to add beers
        }


  render() {
    return (
      <div className="App">
      <h1>What is in My Fridge?</h1>

        <ul>
          {this.state.dataSource.map(dataSource => {
            return <li key={`dataSource-${dataSource.id}`}>{dataSource.name} | {dataSource.likes}</li>
          })}
        </ul>

      </div>
    );
  }
}

export default App;