Dexie useLiveQuery hook 导致错误“TypeError: dexie.liveQuery is not a function”

Posted 2023-02-21

【中文标题】Dexie useLiveQuery hook 导致错误“TypeError: dexie.liveQuery is not a function”

【英文标题】：Dexie useLiveQuery hook causes the error "TypeError: dexie.liveQuery is not a function"

【发布时间】：2021-12-09 00:56:51

【问题描述】：

昨天安装了 dexie 和 dexie-react-hooks。 package-lock.json 显示 dexie 3.0.3 和 dexie-react-hooks 1.0.7

使用模板“cra-template-pwa”创建了一个反应应用

将 Dexie 网站上的文档用于基本的 Dexie DB 和 useLiveQuery，并在 React 中创建了这个简单的应用程序组件。

import React from 'react';
import Dexie from 'dexie'
import  useLiveQuery  from 'dexie-react-hooks'

const myDb = new Dexie('myTable');
myDb.version(1).stores(
  
    items: "id,name,startDate,endDate"
  
)

function App() 
  const items = useLiveQuery(myDb.items.orderBy('name'), []);

  const itemViews = items.map(item =>  return <div>item.name</div> )

  return (
    <div className="App">
      <ul>
        itemViews
      </ul>
    </div>
  );


export default App;

当它在浏览器中运行时，应用程序无法显示，而是出现以下错误：

TypeError: dexie.liveQuery is not a function
(anonymous function)
src/dexie-react-hooks.ts:14
  11 | // Make it remember previous subscription's default value when
  12 | // resubscribing (á la useTransition())
  13 | let currentValue = lastResult;
> 14 | const observable = liveQuery(querier);
     | ^  15 | return 
  16 |   getCurrentValue: () => currentValue,
  17 |   subscribe: (onNext, onError) => 

我们做错了什么，还是这是一个错误？

【参考方案1】：

您仍然需要安装 dexie@next 才能使用它（截至 2021 年 10 月）。支持 liveQuery 的新稳定版 dexie 即将推出。

yarn add dexie@next dexie-react-hooks@latest

或

npm i dexie@next dexie-react-hooks@latest

【讨论】：

谢谢！顺便说一句，到目前为止工作得很好。感谢制作 dexie 和 react 钩子。比原始 indexedDb 好得多。刚刚也找到了 mapToClass。喜欢它。