React Material UI Dialog提交表单遇错反复开闭问题求助

问题描述 #

服务端返回错误时，希望在Material UI Dialog内展示错误信息，但点击提交按钮后，Dialog会立即关闭并重新打开，同时表单被重置。尝试使用useRef未解决问题。

核心原因分析 #

1. 表单默认提交行为：未显式阻止表单默认提交，可能触发页面刷新，重置所有组件状态。
2. Redux Thunk错误处理不当：提交失败时Thunk抛出未捕获错误，引发组件异常重渲染。
3. Dialog组件卸载导致表单状态丢失：Material UI Dialog默认在关闭时卸载内部组件，导致表单状态重置。
4. 错误提示未自动触发：未监听Redux错误状态变化，无法自动展示错误信息。

解决方案 #

1. 阻止表单默认提交行为 #

在表单提交函数中显式阻止默认行为，避免页面刷新：

// PriceNewForm组件的onSubmit函数
const onSubmit = async (event) => {
  event.preventDefault(); // 阻止默认表单提交
  const data = { ...getValues(), priceWithTax: Number(getValues().priceWithTax) };
  dispatch(savePrice(data))
    .then((response) => {
      if (response.status === 201) {
        enqueueSnackbar(`Price was saved.`);
        dispatch(endLoading());
        onSubmitEvent(true);
      } 
      else {
        enqueueSnackbar(response.errors.price, { variant: 'error' });
        setOpenAlert(true); // 触发错误提示
      }
    })
    .catch((error) => {
      // 捕获Thunk抛出的错误
      enqueueSnackbar(error.message || '提交失败', { variant: 'error' });
      setOpenAlert(true);
    });
};

2. 确保Redux Thunk正确返回错误信息 #

修改savePrice Thunk，在失败时返回包含错误信息的对象，而非抛出错误：

// savePrice Thunk示例
export const savePrice = (data) => async (dispatch) => {
  try {
    const response = await api.post('/prices', data);
    dispatch(endLoading());
    return { status: 201, data: response.data };
  } catch (error) {
    dispatch(endLoading());
    // 返回错误状态和信息
    return { 
      status: error.response?.status || 500, 
      errors: error.response?.data?.errors || { price: '未知错误' } 
    };
  }
};

3. 保持Dialog组件挂载，避免表单状态丢失 #

在Dialog组件中添加keepMounted属性，确保关闭时不卸载内部表单组件：

// DialogAnimate组件的Dialog标签
<Dialog 
  ref={innerRef}
  fullWidth
  maxWidth="xs"
  open={open}
  onClose={onClose}
  keepMounted // 保持组件挂载，保留表单状态
  PaperComponent={(props) => {
    // ... 原有代码
  }}
  {...other}>

4. 自动监听错误状态，显示提示Alert #

添加useEffect监听Redux中的错误状态，自动触发错误提示：

// PriceNewForm组件中添加
useEffect(() => {
  if (error) {
    setOpenAlert(true);
  }
}, [error]);

5. 正确传递Dialog关闭回调 #

在调用DialogAnimate时传递onClose属性，确保遮罩层和关闭按钮的关闭行为一致：

// PriceForm组件中的DialogAnimate
<DialogAnimate 
  dialogTitle="Add Price" 
  ref={dialogRef}
  onClose={handleCloseModal} // 传递关闭回调
>
  <PriceNewForm onSubmitEvent={() => handleCloseModal()}/>
</DialogAnimate>

同时修改DialogAnimate内遮罩层的点击事件为使用外部回调：

// DialogAnimate的PaperComponent内的遮罩层Box
<Box onClick={onClose} sx={{ width: '100%', height: '100%', position: 'fixed' }} />

内容的提问来源于stack exchange，提问作者Gianpierre Velasquez