React.Suspense同页面切换查询参数时不触发fallback问题求助

同路由路径仅查询参数变化时，React Router v6的loader正常执行，但React.Suspense的fallback未显示。核心原因是React的组件复用机制：查询参数变化时，页面组件不会重新挂载，导致Suspense无法捕获新异步请求的pending状态。

1. 为Await组件添加基于查询参数的key #

利用React的key属性强制组件重新挂载，让Suspense重新捕获异步请求的pending状态：

import { useSearchParams } from "react-router-dom";

// 在组件内部获取当前查询参数
const [searchParams] = useSearchParams();

// 为Await组件绑定基于查询参数的key
<React.Suspense fallback={<div>Loading table...</div>}>
    <Await
      key={searchParams.toString()} // 查询参数变化时key更新，触发组件重新挂载
      resolve={worksheets}
      errorElement={<div>Could not load table 😬</div>}
    >
      {(resolved) => {
        // 将data定义移至回调内部，避免多次渲染数据累积
        const data = resolved.map((row: any, i: number) => ({
          key: i,
          age: row[0],
          malesFemalesAll: row[1],
          malesAll: row[2],
          femalesAll: row[3],
          malesFemalesCity: row[4],
          malesCity: row[5],
          femalesCity: row[6],
          malesFemalesRural: row[7],
          malesRural: row[8],
          femalesRural: row[9],
        }));
        return (
          <Table
            columns={columns}
            dataSource={data}
            bordered
            size="middle"
            scroll={{ x: 'calc(700px + 50%)', y: 240 }}
          />
        );
      }}
    </Await>
</React.Suspense>

2. 修正数据处理逻辑 #

原代码中data是外部变量，会导致多次渲染时旧数据残留。将data的定义移到Await的回调函数内部，确保每次都基于最新的响应数据生成数组，避免闭包带来的问题。

React通过key判断组件是否复用：当key变化时，React会卸载旧组件并挂载新组件。新组件挂载时，Suspense会重新监听Await中resolve的Promise状态，在请求pending阶段显示fallback内容。

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