React.js中如何在Axios响应回调中调用Props传递的模态框关闭函数

我希望在点击「Yes」按钮时发送Axios请求并关闭模态框。我的模态框关闭函数是通过Props传递至组件的，而Axios请求逻辑封装在一个自定义函数中。请问如何在Axios的响应回调中调用这个Props传递的函数？或者如何实现点击「Yes」按钮时同时触发请求函数与Props传递的模态框关闭函数？

以下是我的代码：

function DeleteRow(props){
  let {ErrorHandler} = useContext(ErrorContext);
  let {DidUpdate} = useContext(AsideContext);
  let data = `id=${props.status.rowId}`;
  function DeleteRowReq(){
    axios.post('Acounting-API/API/expenses/delete.php' , data)
    .then(res => {
      if(res.data == 'id-error') ErrorHandler('An error has occurred , plz Contact support' , 'warning')
      else if(res.data == 'error') ErrorHandler('An error has occurred , plz Contact support' , 'warning')
      else if(res.data == 'success'){
        ErrorHandler('The desired row was successfully removed' , 'success')
        DidUpdate(`delete row with id : `);
        props.closeModal.bind(this , '' , 'delete_table_row_hide');
      }
    })
    .catch(e => console.log(e))
  }
  return(
    <div className={`${style.logout_modal_field} ${props.status.className}`} onClick={props.closeModal.bind(this , '' , 'delete_table_row_hide')}>
      <div className={style.main_field}>
        <div className={style.content} onClick={e => e.stopPropagation()}>
          <p>Are you sure you want to delete this row ?</p>
          <div>
            <button onClick={DeleteRowReq}>Yes</button>
            <button onClick={props.closeModal.bind(this , '' , 'delete_table_row_hide')}>No</button>
          </div>
        </div>
      </div>
    </div>
  )
}

你的核心问题在于没有实际调用关闭模态框的函数，而是只做了函数绑定操作。我来帮你一步步修正并优化代码：

1. 修复响应回调中的关闭逻辑 #

在你的DeleteRowReq函数的then回调里，props.closeModal.bind(this , '' , 'delete_table_row_hide')只是创建了一个绑定参数的新函数，但并没有执行它。而且在函数组件里this本身是undefined，完全不需要用bind，直接传参数调用即可：

else if(res.data == 'success'){
  ErrorHandler('The desired row was successfully removed' , 'success')
  DidUpdate(`delete row with id : ${props.status.rowId}`); // 补全id让提示更清晰
  // 直接调用关闭函数
  props.closeModal('', 'delete_table_row_hide');
}

这种“请求成功后再关闭模态框”的逻辑更合理——如果请求失败，用户还能留在模态框里看到错误提示，不会糊里糊涂就关掉了。

2. 优化按钮的点击事件绑定 #

模板里的onClick用bind(this, ...)完全没必要，函数组件里this没有意义，换成箭头函数直接传参数，代码更简洁易懂：

// 外层div的点击事件
<div 
  className={`${style.logout_modal_field} ${props.status.className}`} 
  onClick={() => props.closeModal('', 'delete_table_row_hide')}
>
  // ...
  // No按钮的点击事件
  <button onClick={() => props.closeModal('', 'delete_table_row_hide')}>No</button>

3. 可选：优化请求数据格式 #

你现在手动拼接data字符串的方式不够规范，推荐用URLSearchParams或者直接传对象，让Axios自动处理编码，避免潜在的格式问题：

// 方式1：用URLSearchParams（推荐，兼容大部分后端）
const data = new URLSearchParams();
data.append('id', props.status.rowId);

// 方式2：直接传对象（需要后端支持接收JSON格式）
const data = { id: props.status.rowId };

// 请求部分不变
axios.post('Acounting-API/API/expenses/delete.php', data)

4. 完善错误处理 #

目前你的catch里只打印错误到控制台，用户看不到任何提示，建议也调用ErrorHandler给用户反馈：

.catch(e => {
  console.log(e);
  ErrorHandler('Request failed, please try again later', 'error');
})

修改后的完整代码 #

function DeleteRow(props){
  const { ErrorHandler } = useContext(ErrorContext);
  const { DidUpdate } = useContext(AsideContext);
  // 优化请求数据格式
  const data = new URLSearchParams();
  data.append('id', props.status.rowId);

  function DeleteRowReq(){
    axios.post('Acounting-API/API/expenses/delete.php', data)
    .then(res => {
      // 合并重复的错误判断逻辑
      if(res.data === 'id-error' || res.data === 'error') {
        ErrorHandler('An error has occurred, please contact support', 'warning');
      } else if(res.data === 'success') {
        ErrorHandler('The desired row was successfully removed', 'success');
        DidUpdate(`delete row with id : ${props.status.rowId}`);
        // 成功后关闭模态框
        props.closeModal('', 'delete_table_row_hide');
      }
    })
    .catch(e => {
      console.log(e);
      ErrorHandler('Request failed, please try again later', 'error');
    })
  }

  return(
    <div 
      className={`${style.logout_modal_field} ${props.status.className}`} 
      onClick={() => props.closeModal('', 'delete_table_row_hide')}
    >
      <div className={style.main_field}>
        <div className={style.content} onClick={e => e.stopPropagation()}>
          <p>Are you sure you want to delete this row ?</p>
          <div>
            <button onClick={DeleteRowReq}>Yes</button>
            <button onClick={() => props.closeModal('', 'delete_table_row_hide')}>No</button>
          </div>
        </div>
      </div>
    </div>
  )
}

这样修改后，点击Yes按钮会先发起删除请求，请求成功后自动关闭模态框，同时完善了错误场景的用户提示，代码也更规范易读。

内容的提问来源于stack exchange，提问作者Kasra Habibbeygi