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});
});

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

1 个答案: