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

Question

我在使用 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
    })
   })
}

但是这个 def 不是正确的方法。

Answer 1

您通常会做的是让服务器从 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});
});