javascript - 在函数中调用 componentDidMount 是不好的做法吗？

Question

我的 ReactJS 应用程序中有一个函数，它向服务器发送 axios POST 请求以从我的数据库中删除某个元素。

基本上，我有一个列表，我可以从中删除某些项目，但是，React 只会在刷新页面后显示通过删除元素所做的更改。

这是我使用的删除函数:

handleDelete (event) {
    var id = event.target.id;
    axios.get('todos/delete?id='+id)
        .then(function(response) {
        });
    this.componentDidMount();
}

componentDidMount() 从我的数据库中获取数据并将其存储在状态中。 我发现，如果我在函数中调用 componentDidMount，它会立即显示更改，但是，我觉得这是一种相当不专业的方式来完成我想要实现的目标。 因此我的问题是:

• 在另一个函数中调用生命周期方法是否被认为是不好的做法？
• 是否有更好的方法让页面立即显示更改？

Answer 1

嗯，你真的不应该那样做。

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 调用您的之后应该是 then

里面的代码

axios.get('todos/delete?id='+id)
     .then(() => {
       this.fetchData();
     });