Axios Delete函数失效：调查问卷删除按钮点击无响应求助

看起来你在实现删除功能时遇到了点击无反应的情况，我帮你梳理几个最可能的原因和排查步骤：

1. 检查类组件中方法的this绑定问题 #

如果你的newDelete是类组件中的普通方法，没有正确绑定this的话，点击按钮时this会是undefined，导致无法调用deleteSurvey action。解决方法有两种：

• 在组件的constructor中手动绑定：

  constructor(props) {
    super(props);
    this.newDelete = this.newDelete.bind(this);
  }
  

• 或者直接用箭头函数定义方法（自动绑定this）：

  newDelete = (surveyId) => {
    // 你的删除逻辑，比如调用this.props.deleteSurvey(surveyId)
  }
  

2. 确认deleteSurvey Action Creator的正确性 #

你导入了deleteSurvey，但要确保这个action creator正确发起了后端API请求，并且处理了异步逻辑（如果用了Redux Thunk之类的中间件）：

• 正确的异步action示例：

  // actions/index.js
  import axios from 'axios';
  
  export const deleteSurvey = (surveyId) => async (dispatch) => {
    try {
      // 调用后端删除接口
      await axios.delete(`/api/surveys/${surveyId}`);
      // 分发action更新Redux state
      dispatch({ type: 'DELETE_SURVEY', payload: surveyId });
    } catch (err) {
      console.error('删除失败:', err);
    }
  };
  

• 同时要确保在connect时把deleteSurvey映射到组件props：

  export default connect(null, { deleteSurvey })(SurveyList);
  

3. 检查按钮的onClick绑定方式 #

如果按钮的onClick直接执行了函数（而不是传递函数引用），会导致组件渲染时就触发删除，而不是点击时触发：

• ❌ 错误写法：

  <button onClick={this.newDelete(survey._id)}>删除调查问卷</button>
  

• ✅ 正确写法（用箭头函数包裹）：

  <button onClick={() => this.newDelete(survey._id)}>删除调查问卷</button>
  

• 或者用bind传递参数：

  <button onClick={this.newDelete.bind(this, survey._id)}>删除调查问卷</button>
  

4. 验证Redux Reducer是否处理了删除Action #

即使API请求成功，如果Reducer没有更新state，页面也不会有变化，看起来像是无响应：

• 示例Reducer处理逻辑：

  // reducers/surveysReducer.js
  export default (state = [], action) => {
    switch (action.type) {
      case 'FETCH_SURVEYS':
        return action.payload;
      case 'DELETE_SURVEY':
        // 过滤掉被删除的问卷
        return state.filter(survey => survey._id !== action.payload);
      default:
        return state;
    }
  };
  

5. 用开发者工具排查API请求 #

打开浏览器F12的Network标签，点击删除按钮后：

• 看是否有DELETE请求发送到后端
• 检查请求的状态码（200/204表示成功，4xx/5xx表示错误）
• 如果请求报错，查看Response里的错误信息，排查后端问题

如果能提供newDelete的完整代码、deleteSurvey的完整action代码以及按钮的JSX代码，能更精准定位问题哦！

内容的提问来源于stack exchange，提问作者Avi Prasad