useLiveQuery

[zj91zj]

"react": "^18.2.0",
"dexie": "^4.0.7",
"dexie-react-hooks": "^1.1.7"
报错TypeError: Cannot read properties of null (reading 'useRef')

import React from 'react';
import { Dexie, type EntityTable } from 'dexie';
import { useLiveQuery } from 'dexie-react-hooks';

// Typing for your entities (hint is to move this to its own module)
export interface Friend {
id: number;
name: string;
age: number;
}

// Database declaration (move this to its own module also)
export const db = new Dexie('FriendDatabase') as Dexie & {
friends: EntityTable<Friend, 'id'>;
};
db.version(1).stores({
friends: '++id, age',
});

// Component:
export function MyDexieReactComponent() {
const youngFriends = useLiveQuery(() =>
db.friends
.where('age')
.below(30)
.toArray()
);

return (
<>

My young friends

{youngFriends?.map((f) => (

• 
  Name: {f.name}, Age: {f.age}
  

))}

<button
onClick={() => {
db.friends.add({ name: 'Alice', age: 21 });
}}
>
Add another friend

</>
);
}