React进入组件时如何清除被污染的useState状态？

问题背景 #

开发支持Excel文件上传、数据关联关系展示的类Maltego网站时，存在如下异常：

• 上传不符合规范的无效文件会触发错误提示，用户可重试上传其他文件
• 项目使用useState管理文件数据状态，路由回退时useState不会自动重置，会保留被污染的异常状态，进而引发代码运行异常
• 需求为实现进入组件时自动清空对应异常状态

原有问题代码如下：

const [fileData, setFileData] = useState<any>();

const handleFileData = (data: Array<any>) => {
  setFileData(data);
}

const isData = () => {
  if (fileData !== undefined) { return <MainPage Data={fileData}></MainPage> }
  else { return (HOMEPAGEerrorversion) }
};
return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={HOMEPAGE}></Route>
      <Route path="/main" element={isData()}></Route>
    </Routes>
  </BrowserRouter>
);

补充场景：HOMEPAGEerrorversion页面使用Material UI模态框，关闭模态框时会路由跳转回首页HOMEPAGE。

问题根因 #

fileData状态定义在路由组件外层，只要外层父组件不卸载，useState存储的值会一直驻留内存，路由切换不会触发外层组件的状态重置。同时/main路由的渲染逻辑直接通过isData()函数内联判断，对应页面没有独立的组件生命周期，无法在路由进入/离开时自动触发状态重置，异常的文件状态会被一直保留，最终触发运行错误。

可选解决方案 #

方案1：跳转前主动重置状态（改造成本最低） #

错误页关闭MUI模态框触发路由跳转到首页的逻辑中，在跳转前主动调用状态更新方法清空污染数据，适配现有代码逻辑无需调整结构。
原模态框关闭逻辑示例：

const handleCloseModal = () => {
  navigate('/');
}

修改后：

const handleCloseModal = () => {
  setFileData(undefined); // 跳转前清空异常文件状态
  navigate('/');
}

• 优势：代码改动量极小，无需引入额外依赖、调整组件结构
• 注意：需要覆盖所有从/main路由跳走的场景（包括浏览器后退、其他跳转按钮等），否则仍会出现状态漏清的问题

方案2：抽离独立路由组件，靠卸载自动重置状态（推荐，符合React设计规范） #

将/main路由对应的渲染逻辑抽离为独立组件，把fileData状态迁移到独立路由组件内部管理。路由切走时组件会自动卸载，内部状态随之被回收；下次进入路由时组件重新挂载，useState会自动恢复初始值，从根源避免跨路由状态污染。
修改后代码示例：

// 抽离/main路由对应的独立页面组件
const MainRoute = () => {
  // 状态移到路由组件内部，生命周期和路由完全绑定
  const [fileData, setFileData] = useState<any>();

  const handleFileData = (data: Array<any>) => {
    setFileData(data);
  }

  // 直接在组件内做渲染判断
  if (fileData !== undefined) {
    return <MainPage Data={fileData} />
  }
  return HOMEPAGEerrorversion;
}

// 路由层直接挂载独立组件
return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={HOMEPAGE}></Route>
      <Route path="/main" element={<MainRoute />}></Route>
    </Routes>
  </BrowserRouter>
);

• 优势：不需要手动在每个跳转入口写重置逻辑，状态生命周期和路由完全绑定，不会出现漏清问题，后续维护成本低
• 符合React状态最佳实践：状态应定义在离使用场景最近的上层组件，全局定义页面级状态本身就容易引发跨页面污染问题

方案3：监听路由变化统一重置状态 #

如果不想调整现有组件结构，可以借助react-router提供的useLocation钩子监听路由路径变化，离开/main路由时主动清空状态。
示例代码：

import { useLocation } from 'react-router-dom';

// 在定义fileData的组件内添加路由监听
const location = useLocation();
useEffect(() => {
  // 离开/main路由时重置文件状态
  if (location.pathname !== '/main') {
    setFileData(undefined);
  }
}, [location.pathname]);

• 优势：无需拆分组件，全局统一处理路由切换的状态重置逻辑
• 注意：需要保证当前组件处于BrowserRouter上下文范围内，否则useLocation会抛出上下文错误

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