javascript - 提交POST请求后，如何通过GET请求呈现我的最新数据

我在Reactjs生命周期上遇到了一些困难。我已经设置好了前端和后端，但是在通过POST请求提交新数据后，我不知道如何重新渲染最新数据。

我目前正在使用componentWillMount来显示数据库中的所有初始数据

componentWillMount(){
  axios.get('localhost:####/api/)
   .then(res =>{
     this.setState({
       listOfData:res.data
     })
   })
}

我有一个addData函数，它将POST请求发送到我的数据库

addData(){
  let newData = 'string';
  axios.post(localhost:####/api, newData)
}

现在我知道我们可以将GET请求中的listOfData分配为变量，然后将新配方推送到状态数组（listOfData）中以在前端显示它，但是我数据库中的表的ID增量为因此，如果我想更新或删除我的最新数据，则会导致错误。它无法读取有意义的id值，因为我没有在POST请求中分配id。

我可以从数据库中显示新数据的唯一方法是刷新页面，这将达到目的。为了定位正确的ID，我是否必须从前端添加ID和时间戳？必须有一种方法可以重新渲染我的页面并更新listOfData而无需刷新它。

我尝试了以下

componentWillUpdate(){
  axios.get('localhost:####/api/)
   .then(res =>{
    this.setState({
     listOfData:res.data
    })
   })
}

但是这种定义不是正确的方法。

最佳答案

您通常要做的是让服务器从POST请求中返回新项目（然后将包含ID和时间戳），然后将其插入列表中：

axios.post('localhost:####/api', newData).then((response) => {
    var newItem = response.data;
    var listOfData = [...this.state.listOfData];
    listOfData.push(newItem);
    this.setState({listOfData: listOfData});
});