反应“ReferenceError：indexedDB未定义”但它以某种方式工作

Question

我通过yarn安装了idb-keyval

我使用导入它

import { set } from 'idb-keyval';

并使用设置变量

set('hello', 'world');

如图所示，它可以工作。有点像。该条目进入indexedDB，但它告诉我indexedDB尚未定义。

是的，我已经重新启动了开发服务器。

Answer 1

我建议您在

set

中编码

useEffect

。 这适用于我的情况... 我在下面添加了我的测试代码。

    import { set, get } from 'idb-keyval';
    import { useEffect, useState } from 'react';

    export default function Main() {

        const [member, setMember] = useState([]);
        const [member2, setMember2] = useState([]);


        useEffect(() => {

            set('member', {
                "spec": [
                    { name: 'bar', age: 20 },
                    { name: 'dall', age: 32 },
                    { name: 'hong', age: 47 },
                ],
                "spec2": [
                    { name: 'bar2', age: 20 },
                    { name: 'dall2', age: 32 },
                    { name: 'hong2', age: 47 },
                ],
            }).then(() => {
                get('member').then(user => { 
                    setMember(user.spec) 
                    setMember2(user.spec2) 
                });

            });
        }, []);

        return (
            <div>
                <h1>IdbTest</h1>
                {member.map((item, index) => {
                    return <div key={index}>
                        <p>{item.name}</p>
                        <p>{item.age}</p>
                    </div>
                })}
                {member2.map((item, index) => {
                    return <div key={index}>
                        <p>{item.name}</p>
                        <p>{item.age}</p>
                    </div>
                })}
            </div>
        )
    }

Answer 2

我面临这个问题，在创建自定义商店之前，我必须检查

typeof indexedDB !== 'undefined'

请参阅下面的代码示例：

const yourCustomStore  =
  typeof indexedDB !== 'undefined' ? createStore('hi-there', 'keyval') : undefined;