如何跟踪 dexie UseLiveQuery 是否完成

Question

我想在 UseLiveQuery 未完成时显示加载程序，并在 UseLiveQuery 返回空数组时显示“未找到组件”。

有没有一种简单的方法可以做到这一点？

非常感谢。

Answer 1

当您的查询器返回一个数组时，这是最简单的（见下文）。那么未定义的结果意味着仍在加载，而空数组意味着已完成加载但结果为零。

const friends = useLiveQuery (() => db.friends.toArray());
if (!friends) return <Spinner />; // Still loading

return <ul>{
  friends.map(friend => <li key={friend.id}>
    {friend.name}, {friend.age}
  </li>)
}</ul>;

但是，如果您的查询器从table.get()返回结果，则 undefined 值可能意味着查询仍在加载或未找到请求的 id。为了区分两者，您可以让查询器返回一些内容，以便更容易区分两者。例如，让查询器将结果作为数组中的一项返回，并为useLiveQuery()提供第三个参数，并将空数组（未定义的数组）作为默认结果。

const [friend, loaded] = useLiveQuery (
  () => db.friends.get(1).then(friend => [friend, true]),
  [], // deps...
  []  // default result: makes 'loaded' undefined while loading
);

if (!loaded) return <Spinner />; // Still loading...
if (!friend) return <NotFound ... />; // Loaded but friend not found

return <>{friend.name}, {friend.age}</>; // Loaded and friend found.

也就是说，在查询 indexedDB 时通常不需要微调器（除非非常复杂的查询）。在这种情况下，可能最好只返回null而不是<Spinner />，以最少地打扰最终用户。