在函数内调用componentDidMount是否为不良实践？React删除数据实时更新方案

嘿，我来帮你理清这两个问题的答案：

绝对是不良实践！React的生命周期方法（比如componentDidMount）是框架内部用来管控组件挂载、更新、卸载等阶段的钩子，它们的调用时机由React自动调度。手动调用这些方法会打破React的生命周期逻辑，很容易引发不可预测的bug——比如重复发起网络请求、状态更新混乱，甚至触发不必要的重渲染拖慢性能。而且这种写法完全不符合React的设计理念，会让代码的可读性和可维护性大打折扣。

给你两种专业的解决方案，按优先级推荐：

方案一：直接更新本地State（最推荐） #

删除请求成功后，不需要重新拉取整个列表，直接在本地State中移除对应的项，页面会立即响应更新，还能减少一次网络请求：

handleDelete(event) {
  const id = event.target.id;
  axios.get('todos/delete?id='+id)
    .then(() => {
      // 基于当前最新的state过滤掉被删除的项
      this.setState(prevState => ({
        todos: prevState.todos.filter(todo => todo.id !== id)
      }));
    })
    .catch(error => {
      // 别忘了处理错误，比如给用户提示删除失败
      console.error('删除操作失败:', error);
    });
}

注意：一定要在请求成功的回调里更新State，避免出现请求失败但本地已经删除数据的不一致情况。

方案二：抽离数据获取逻辑（适合复杂场景） #

如果你的列表数据在删除后可能有后端层面的额外变更（比如自动排序、字段重新计算），可以把获取数据的逻辑单独抽成一个方法，而不是调用componentDidMount：

// 单独抽离获取列表的方法
fetchTodoList() {
  axios.get('todos')
    .then(response => {
      this.setState({ todos: response.data });
    })
    .catch(error => {
      console.error('获取列表失败:', error);
    });
}

// 组件挂载时调用这个方法
componentDidMount() {
  this.fetchTodoList();
}

// 删除成功后重新获取列表
handleDelete(event) {
  const id = event.target.id;
  axios.get('todos/delete?id='+id)
    .then(() => {
      this.fetchTodoList();
    })
    .catch(error => {
      console.error('删除操作失败:', error);
    });
}

这种方式既保持了生命周期的整洁，又能在需要时重新同步后端数据。

最后补充个小细节：删除操作更推荐使用DELETE请求（符合RESTful规范），可以把请求改成：

axios.delete(`todos/${id}`)

内容的提问来源于stack exchange，提问作者A.S.J