React Query DevTools残留初始查询 返回页缓存空结果问题

• Query Key写法不规范：你直接用[searchInput]作为查询键，初始状态下searchInput为undefined，会生成一个独立的空查询条目，不仅会一直显示在React Query DevTools中，还可能和其他同key的查询产生缓存污染，这也是你看到空值缓存的直接原因。
• 搜索状态存储不合理：搜索关键词存在组件本地的useState中，点击进入详情页时搜索组件会被卸载，本地状态直接重置为初始的undefined。返回搜索页时组件重新挂载，当前激活的是对应undefined的空查询，根本命中不了之前搜索词对应的缓存，自然无法展示历史搜索结果。
• 渲染逻辑有漏洞：空查询受enabled: Boolean(searchInput)配置限制不会发起请求，从来没有成功返回过数据，isSuccess标识始终为false，如果你只在isSuccess为true时渲染列表，就会直接出现页面空白。

按以下步骤调整即可：

1. 规范Query Key命名，遵循React Query官方推荐的分层命名规则，给查询加固定前缀做资源命名空间，避免键冲突：
   将useQuery的查询键从[searchInput]修改为['characterSearch', searchInput]。
2. 将搜索关键词从组件本地状态迁移到URL查询参数中存储，替代纯本地useState，组件卸载重挂载、页面刷新时都不会丢失搜索词，返回页面时可以直接命中已有缓存。参考实现如下：

   import { useSearchParams } from 'react-router-dom';
   
   // 替换原有的searchInput本地状态逻辑
   const [searchParams, setSearchParams] = useSearchParams();
   const searchInput = searchParams.get('name') || '';
   
   const getByCharacterName = (apiEndPoint) => {
     return fetch(apiEndPoint).then(async (response) => {
       const data = await response.json();
       return response.ok ? data : Promise.reject(data);
     });
   };
   
   const handleSubmit = (event) => {
     event.preventDefault();
     const keyword = event.target.elements.search.value.trim();
     // 提交搜索时将关键词写入URL
     setSearchParams(keyword ? { name: keyword } : {});
   };
   
   const { data, isLoading, isSuccess } = useQuery(
     ['characterSearch', searchInput],
     () =>
       getByCharacterName(
         `https://rickandmortyapi.com/api/character/?name=${searchInput}`
       ),
     {
       enabled: Boolean(searchInput),
       // 可根据业务调整缓存新鲜度，默认5分钟缓存足够覆盖跳转返回场景
       staleTime: 5 * 60 * 1000
     }
   );
   

3. 补齐分状态渲染逻辑：无搜索词时显示搜索引导、加载中显示加载态、请求成功后再渲染结果列表，避免空查询状态下的白屏问题。

调整后，跳转详情页再返回时，会直接从URL读取之前的搜索关键词，激活对应缓存的查询条目，无需重新发请求就能直接展示历史搜索结果，DevTools中也不会再常驻无用的空查询条目。

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