1

我在使用 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 增量和一个timestamp 因此，如果我想更新或删除我的最新数据，则会导致错误。它无法读取有意义的 id 值，因为我没有在我的 POST 请求中分配 id。

我可以显示数据库中的新数据的唯一方法是刷新页面，这违背了目的。我是否必须从我的前端包含一个 id 和时间戳，然后才能定位正确的 id？必须有一种方法可以重新渲染我的页面并更新 listOfData 而无需刷新它。

我试过以下

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

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

4

1 回答 1

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});
});
于 2018-04-09T22:41:19.973 回答