我想将 indexedDB 中的数据显示到视图中，我正在使用 reactjs

Question

我想使用 Reactjs 从 indexdedDB 中检索数据，但我不知道如何将其返回到视图中，

这是我的代码........

import React, { useState, useEffect } from 'react';



function Mypokemon() {
    var db;
    var request = window.indexedDB.open("pokemon_data", 1);
    //on error opening DB
    request.onerror = function (event) {
        console.log("error: ");
    };

    //on success opening DB
    request.onsuccess = function (event) {
        db = request.result;
        console.log("connected to DB")

        db.transaction(['data'], 'readwrite').objectStore('data').openCursor().onsuccess = function (event) {
            var cursor = event.target.result
            if (cursor) {
                //something to do here for applying data to html
            };


        }
    }
    //this code below for make the empty table
    request.onupgradeneeded = function (event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("data", {
            keyPath: "id"
        });
        console.log('success make table')
    }

    return (<div className="flexin" id="my_poke">
        {/* this where the data should showning */}
    </div >)

}
export default Mypokemon;

谁能帮帮我，对不起我的代码结构:(

Answer 1

您应该使用useState 和useEffect。

例如：

import React, { useState, useEffect } from 'react';

function Mypokemon() {
    const [ value, setValue ] = useState();

    useEffect(function(){
        const valueFromDb = getValueFromDb();  // make your request
        setValue( valueFromDb );
    },[]);

    return (<div className="flexin" id="my_poke">
        { value }
    </div >)

}
export default Mypokemon;