React项目useEffect中调用Cache.put出现类型错误求助

API 探路者

2026-7-3

问题原因排查

可能的差异点

CRA开发环境的Response polyfill：你的本地CRA项目可能使用了旧版本的react-scripts，其中内置的Response polyfill会覆盖原生对象，导致创建的Response实例不被Cache.put的类型校验认可。而Codesandbox的CRA环境可能默认使用了更新的配置，或者没有引入该polyfill。
React严格模式的重复执行：CRA默认开启React严格模式，useEffect会被执行两次。虽然这本身不会直接导致类型错误，但重复的缓存操作可能引发意外的状态冲突，间接触发错误。
项目配置差异：你的本地项目可能配置了代理、PWA插件或其他自定义webpack规则，干扰了缓存API的正常工作，而Codesandbox的默认配置没有这些。

解决方法

1. 强制使用原生Response对象

修改创建Response的代码，明确调用浏览器原生的window.Response，避免被polyfill覆盖：

const data = new window.Response(JSON.stringify(response));

2. 升级react-scripts到最新版

旧版本的react-scripts存在polyfill相关的兼容性问题，升级到最新稳定版可以解决大多数此类问题：

npm install react-scripts@latest
# 或者用yarn
yarn add react-scripts@latest

3. 添加错误捕获并优化异步逻辑

原代码缺少错误捕获，且使用链式then可读性较差，改成异步函数并添加错误处理，方便排查问题：

const addDataIntoCache = async (cacheName, url, response) => {
  if (!("caches" in window)) return;
  
  try {
    const data = new window.Response(JSON.stringify(response));
    const cache = await caches.open(cacheName);
    await cache.put(url, data);
    alert("Data Added into cache!");
  } catch (err) {
    console.error("缓存操作失败:", err);
  }
};