我的 ReactJS 应用程序中有一个函数，它向服务器发送 axios POST 请求以从我的数据库中删除某个元素。
基本上，我有一个列表，我可以从中删除某些项目，但是，React 仅显示刷新页面后删除元素所做的更改。
这是我使用的删除功能：
handleDelete (event) {
var id = event.target.id;
axios.get('todos/delete?id='+id)
.then(function(response) {
});
this.componentDidMount();
}
componentDidMount()从我的数据库中获取数据并将其存储在状态中。我发现，如果我componentDidMount在函数内调用，它会立即显示更改，但是，我觉得这是一种相当不专业的方式来完成我想要实现的目标。因此我的问题是：
好吧，你真的不应该那样做。
componentDidMount只是组件的生命周期方法。你想要的是这个结构：
fetchData () { ... };
handleDelete (event) {
var id = event.target.id;
axios.get('todos/delete?id='+id)
.then(function(response) {
});
this.fetchData();
}
componentDidMount() {
this.fetchData();
}
这是一个简化的例子，但你明白了。
注：在handleDelete功能，如果你想在fetchData发生通话后的Axios公司拨打您应该，但里面的代码，然后
axios.get('todos/delete?id='+id)
.then(() => {
this.fetchData();
});
答案 1 - 不建议在任何函数中调用生命周期方法。
答案2 - 更好的推荐方式，调用所有服务器函数ComponentDidMount
更多参考在这里检查
您可以通过这种方式进行操作：-
componentDidMount(){
// do some get opration to get data from server
getFunction();
}
handleDelete (event) {
var id = event.target.id;
axios.get('todos/delete?id='+id)
.then(function(response) {
// get operation here in response
});
}
确实，这是一种不好的做法。您可以使用 React 生命周期来更新您的状态，也可以直接在handleDelete函数中使用。
handleDelete = ({ target }) => {
const { id } = target;
axios.get('todos/delete?id=='+id')
.then(response => {
const todos = this.state.todos;
todos.splice(indexOfTheItem,1);
this.setState({ todos });
})