如何在React中初始化索引数据库？

Question

我的 React 应用程序中有一个组件，我需要在其中初始化索引数据库。在 useEffect 挂钩内对其进行初始化，如下所示：

React.useEffect(() => {
  const initializeDB = async () => {
    const db = await openVoucherDB();
    setDb(db);
  };

  initializeDB();
}, []);

问题是这个 useEffect 挂钩使我的组件无限地重新渲染（使用将示例文本记录到控制台进行测试）。

该项目正在使用这些软件包：

“idb”：“^8.0.0”

我已经测试了在 useEffect 挂钩内调用异步方法的其他变体，例如：

React.useEffect(() => {
  openVoucherDB().then(db) => setDb(db));
}, []);

但是问题确实存在。

openVoucherDB()

功能是：

import { openDB } from 'idb';

export function openVoucherDB() {
  return openDB('db_name', 1, {
    upgrade(database) {
      createObjectStore(database, 'store_name');
    },
  });
}

Answer 1

我想问题是在哪个组件中初始化这个数据库实例。应该在组件树中相当高的位置。

将此数据库实例存储在上下文中可能是个好主意。

顺便说一句，为了调试重新渲染，我建议使用 https://ahooks.js.org/hooks/use-why-did-you-update/