React页面关闭Modal后无法滚动，刷新内容消失问题排查

数据老陈

2026-8-24

问题分析与修复方案

1. 关闭弹窗后页面无法滚动

问题原因：
Ant Design 的 Modal 组件打开时会给 body 元素添加 overflow: hidden 样式锁定滚动，但部分场景下（如状态更新延迟），关闭弹窗后该样式未被自动移除，导致页面无法滚动。

修复方案：
添加 useEffect 钩子手动控制 body 的滚动状态，监听弹窗可见性：

import { useEffect } from 'react';

// 在组件内部添加
useEffect(() => {
  if (isModalVisible) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = '';
  }
  // 组件卸载时恢复默认样式
  return () => {
    document.body.style.overflow = '';
  };
}, [isModalVisible]);

2. 提交表单后内容消失，刷新页面也丢失

这个问题有几个核心排查方向：

原因一：表单提交触发页面重载

虽然 Ant Design Form 会默认阻止原生表单提交，但如果 sendOnSubmit 函数包含页面刷新逻辑（如 window.location.reload()），或表单默认行为未被正确拦截，会导致页面重新加载。若父组件未在页面加载时重新获取卡片数据，就会出现内容丢失。

修复方案：

检查 sendOnSubmit 函数，移除任何触发页面重载的代码。
手动在 onFinish 中阻止默认提交行为（兜底处理）：

const onFinish = async (values, e) => {
  e?.preventDefault(); // 阻止原生提交行为
  // 原有逻辑...
};

原因二：`success` 状态导致条件渲染异常

代码中设置了 setSuccess(true)，若省略的代码在 success 为 true 时隐藏了卡片主体内容（如仅渲染成功提示而不保留原有卡片），会导致页面内容消失。

修复方案：
检查省略的代码部分，确保 success 状态仅添加成功提示，而非替换或隐藏全部卡片内容。例如：

// 示例：保留卡片内容，添加成功提示
<div className="card">
  {/* 原有卡片内容 */}
  {success && <div className="success-tip">兑换成功！</div>}
</div>

原因三：页面刷新时未重新获取数据

若卡片数据（props.card）仅存储在客户端状态中，未在页面加载时从服务器重新获取，刷新页面后状态丢失，会导致 props.card 为空，内容自然消失。

修复方案：
确保父组件在挂载时重新获取卡片数据：

// 父组件示例
useEffect(() => {
  // 调用接口获取卡片数据并更新状态
  fetchCardData();
}, []);

原因四：交易提交后数据未同步

提交交易后用户积分可能减少，若父组件依赖积分状态渲染卡片，但未重新获取最新积分数据，可能导致卡片被隐藏或渲染异常。

修复方案：
在 onFinish 的成功回调中，重新获取用户积分数据（或通知父组件更新状态）：

.then((response) => {
  setCc(response.data.referenceNumber);
  handleOk();
  setSuccess(true);
  setAmt(amt);
  // 新增：重新获取用户积分
  Axios.get(bh + "/getUser").then(res => {
    // 更新积分状态，或通知父组件
    const user = localStorage.getItem("email");
    const userData = res.data.find(item => item.email === user);
    setPoints(userData?.points || 0);
  });
})

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