Reactjs 获取POST和PUT请求后重新加载

我有一个从RESTAPI获取用户数据的应用程序。我能够获取数据。我还需要能够将数据发布到API，并对API进行编辑。我的代码能够成功地执行所有这些操作，但是我需要刷新页面以查看提交内容。我遇到的麻烦是在提交后自动重新提交页面。我知道我必须在调用后设置状态或重新蚀刻API。但我不知道如何组织这个。有什么建议吗

import React, { Component } from 'react';
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;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：[]，
isLoaded:false，
}
this.editBeersLikes=this.editBeersLikes.bind（this）；
this.addNewBeer=this.addNewBeer.bind（this）；
}
西比尔斯{
返回取回（“https://beer.fluentcloud.com/v1/beer/“”//指定id号以显示单个啤酒型号。“https://beer.fluentcloud.com/v1/beer/99"
.then（response=>response.json（））
.然后（responseJson=>{
这是我的国家({
isLoaded：是的，
数据来源：responseJson，
});
返回响应；
})
.catch（error=>console.log（error））；//捕获错误（如果有）
}
addNewBeer（）{
取回（“https://beer.fluentcloud.com/v1/beer/", {
正文：“{\'name\'：\”，\'likes\'：\“\”}，//输入啤酒名称和类似金额，例如“{\'name\'：\'Michelob Ultra\”，\'likes\'：\'-5\'}”
标题：{
“内容类型”：“应用程序/json”
},
方法：“员额”
})
console.log（“添加啤酒！”）；
}
editBeersLikes（）{
取回（“https://beer.fluentcloud.com/v1/beer/99“，{//必须指定id号才能编辑单个啤酒”https://beer.fluentcloud.com/v1/beer/99"
正文：“{\'likes\”：\“\”}，//要编辑的喜欢的输入量，例如“{\'likes\”：\'22\”}
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
},
方法：“投入”
})
log（“Likes已成功更新！”）；
}
componentDidMount（）{
这个。西比尔斯（）；
//this.editBeersLikes（）；//要编辑likes时取消注释
//this.addNewBeer（）；//要添加啤酒时取消注释
}
render（）{
返回(
我的冰箱里有什么？

{this.state.dataSource.map（dataSource=>{
return
{dataSource.name}{dataSource.likes}
})}

);
}
}
导出默认应用程序；

最简单的方法可能是在成功发布数据或将数据放入服务器后重新获取数据。这也是最干净、最不容易出错的方法，因为您总是使用最新的数据集从服务器获得新的响应

但是，您可以使用一种通常被称为“乐观ui”的模式，这意味着您保持两种状态：当前状态和服务器请求成功时的状态。然后将新的或更新的项目推送到

数据源的状态，并在UI中显示它，但如果请求失败，则将其从服务器请求之前恢复到旧状态

后一种方法的缺点是，如果不再次查询服务器，您有时无法知道所有数据（尤其是自动生成的ID或
lastUpdated
字段）

因此，如果您想要一个相对简单、清晰、可靠的解决方案，可以在每次POST/PUT请求后调用
this.seeBeers（）
，以接收更新的数据集

请记住，当您使用分片或弹性搜索层进行读取操作时，这可能并不总是如预期的那样有效，因为在您完成写入操作后，这些操作可能不会直接同步。不过，这可能与您无关，因为这通常只是处理大规模设置时的一个挑战。
是的！！！非常感谢你。这个函数是this.seeBeers（）；功能运行得很好！！还有一件事：在我的componentWillMount方法中，我必须注释掉this.editBeersLIkes和this.addNewBeers。是否有更合适的方法阻止这些执行为什么在
componentDidMount
中需要它们？在一个典型的应用程序中，你会在用户与你的用户界面交互后调用它们，例如，通过填写表格添加新的啤酒，或按某种“like”按钮添加like。
componentDidMount
方法通常用于获取数据、注册计时器或事件等。使用它来启动写操作（如POST或PUT）是非常不寻常的。好吧，这是有意义的。感谢您在这个问题上的帮助。