React 和 dexie：功能组件中出现“无效的钩子调用”错误

Question

使用 dexie 的 useLiveQuery 钩子和 react 时出现以下错误。不明白，以下三种情况都不适用。

错误：

application.78bb5802.js:58032 未捕获的错误：无效的挂钩调用。 Hooks 只能在函数组件的 >body 内部调用。这可能是由于以下原因之一：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

组件（Editor.js）：

import React, { useState}  from "react";
import Title from './Title'
import Blocks from './Blocks'
import styled from 'styled-components'
import { useLiveQuery } from "dexie-react-hooks";
import db from '../db'

const Editor = () => {
    const [title, setTitle] = useState('');
    console.log("Editor: start - title state: " + title);

    const tag = useLiveQuery(
        () =>
          title
            ? db.tags.where('name').equals(title)
            : db.tags.toCollection().first(),
        [title]
    );
       
    if(!tag) {
        console.log("tag not loaded yet, returning null");
        return null;
    }

    const onTitleChange = (event) => {
        db.tags.where({ name: title }).modify((item) => item.name=event.target.value)
    }
     
    const EditorStyle = styled.section`
        padding: 10px;
        min-width: 400px;
    `;
    console.log("Rendering with title:" + title + " and tag.name: " + tag.name);
    return (
        <EditorStyle>
            <Title 
                onTitleChange={onTitleChange}
                title={tag?.name}
            />
            <Blocks 
                tag={tag?.name}
            />
        </EditorStyle>
    )
}

export default Editor;

数据库（db.js）

db.version(1).stores({ 标签：&name, *tags, 块：tag, content });

数据库预填充了一个值

db.tags.add({name: "首页"});

使用反应 17.0.1。

我做错了什么？

谢谢！

Answer 1

你现在需要 dexie@>3.1.0-alpha.5 来使用 dexie-react-hooks。