React PWA中IndexedDB报错：指定对象存储未找到求助

核心原因 #

首次打开浏览器时，数据库NewApp是全新创建的，但你没有在数据库初始化的关键时机（upgradeneeded事件）创建apps对象存储，导致执行transaction时找不到对应的存储，触发报错。

具体修复步骤 #

1. 补充upgradeneeded事件处理 #

IndexedDB 仅在数据库首次创建或版本号提升时触发upgradeneeded事件，这是创建/修改对象存储的唯一合法时机。必须在这个事件里创建apps存储：

2. 修正错误的事件绑定位置 #

你的request.onerror放在了request.onsuccess回调内部，这会导致数据库初始化出错时无法捕获，需移到外部。

3. 修复语法错误 #

transaction.oncomplete里的/db.close()是笔误，应改为db.close()。

4. 严谨校验输入值 #

空字符串问题是因为输入校验不严谨，需确保nameArea不是空字符串（比如用trim()判断），enterDate有有效值。

修复后的完整代码 #

const handleSubmit = (event) => {
  event.preventDefault();

  // 严谨校验输入，避免空值存入
  if (!nameArea?.trim() || !enterDate) {
    console.warn("输入不能为空");
    return;
  }

  const request = window.indexedDB.open("NewApp", 1);

  // 处理数据库初始化/版本升级：创建对象存储
  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    // 创建名为apps的对象存储，指定自动递增主键
    if (!db.objectStoreNames.contains("apps")) {
      db.createObjectStore("apps", { keyPath: "id", autoIncrement: true });
    }
  };

  request.onsuccess = () => {
    const db = request.result;
    const transaction = db.transaction(["apps"], "readwrite");
    const store = transaction.objectStore("apps");
    // 存入处理后的输入值
    store.put({ nameArea: nameArea.trim(), enterDate: Date.now() });

    const query = store.get(1);
    query.onsuccess = function () {
      console.log("next info", query.result);
    };

    transaction.oncomplete = function () {
      db.close();
    };

    transaction.onerror = function (event) {
      console.error("事务执行出错", event);
    };
  };

  // 数据库初始化错误处理移到外部
  request.onerror = function (event) {
    console.error("IndexedDB初始化出错");
    console.error(event);
  };
};

额外说明 #

• 每次修改数据库结构（比如新增对象存储），需要提升open方法的版本号（比如从1改成2），才会再次触发upgradeneeded事件。
• 事务的onerror也建议加上，能及时捕获数据操作时的错误。

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