React IndexedDB组件中从多个对象仓库获取数据的解决方法咨询

嗨，我完全理解你遇到的困扰——在同一个React组件里使用useIndexedDB钩子从多个对象仓库（比如你的cData和oData）获取数据时，因为重复声明getAll变量导致标识符冲突的报错对吧？别担心，这里有两个简单且实用的解决办法：

方法一：解构赋值时给方法重命名 #

在使用解构获取useIndexedDB返回的方法时，你可以通过别名来区分不同仓库的getAll方法，这样就不会出现重名问题了。同时推荐用Promise.all来并行发起两个数据请求，提升效率：

// 给两个getAll分别起不同的别名
const { getAll: getAllCData } = useIndexedDB("cData");
const { getAll: getAllOData } = useIndexedDB("oData");

useEffect(() => {
  // 并行获取两个仓库的数据
  Promise.all([getAllCData(), getAllOData()])
    .then(([cDataFromDB, oDataFromDB]) => {
      // 分别设置对应状态
      setCData(cDataFromDB);
      setOData(oDataFromDB);
    })
    .catch(error => {
      console.error("数据获取失败:", error);
    });
}, []);

方法二：不使用解构，直接调用返回对象的方法 #

你也可以直接保存useIndexedDB返回的整个对象，之后通过对象访问的方式调用getAll方法，这样从根源上避免了变量重名的问题。搭配async/await还能让代码逻辑更清晰：

// 保存两个仓库的DB实例
const cDataDB = useIndexedDB("cData");
const oDataDB = useIndexedDB("oData");

useEffect(() => {
  // 用async函数包裹异步逻辑
  async function fetchAllData() {
    try {
      // 并行获取数据（也可以根据需求调整为顺序获取）
      const [cData, oData] = await Promise.all([
        cDataDB.getAll(),
        oDataDB.getAll()
      ]);
      setCData(cData);
      setOData(oData);
    } catch (error) {
      console.error("获取数据时发生错误:", error);
    }
  }

  fetchAllData();
}, []);

小提示 #

如果两个仓库的数据获取没有依赖关系，优先用Promise.all并行请求，这样比顺序调用两个await的效率更高；如果某一个请求需要依赖另一个请求的结果，再调整为顺序执行的逻辑即可。

备注：内容来源于stack exchange，提问作者hermi