IndexedDBオブジェクトストアのデータを

2852 ワード
テキストリンク
私は非常に非常に初心者反応のための初心者です.全てのデータをindexeddbに保存しました.しかし、私はデータを読むことができません.開いたカーソルの中で、私はすべてのデータを読んで、配列にプッシュすることができます.しかし、配列の状態を設定することはできませんし、これにより、レンダリングに表示できません.
親切に問題を解決するために助けてください.
以下のコードを実行すると、このエラーが発生します.setstateは関数ではありません.
あなたの答えをコードで掲示してください.ありがとう.
以下のコードサンプルを見てください.
インポート反応、{コンポーネント}から'反応';
var productsstore = null ;
var dbname ="test ";
var dbversion = 2 ;
var DataIndexedDB=[];
クラスTest拡張コンポーネント{
コンストラクタ
スーパー(小道具)
    this.state={
        ProductDetails:[]
    }

}
 componentDidMount = () => {
        try {

            var IProductsDB=null;
            var ProductsDB =  window.indexedDB.open(dbname, dbversion);
            if (ProductsDB) {
                ProductsDB.onsuccess = function (event) {
                    IProductsDB = event.target.result;
                    if (IProductsDB) {
                        try {
                            if(IProductsDB.objectStoreNames.length>0)
                            {
                                if(IProductsDB.objectStoreNames.contains('Products'))
                                {
                                    var transaction = IProductsDB.transaction(["Products"], "readwrite");
                                    ProductsStore = transaction.objectStore("Products");
                                    if (ProductsStore) {
                                        var request = ProductsStore.openCursor();
                                        request.onsuccess = function (evt) {
                                            var cursor = evt.target.result;
                                            if (cursor) {
                                                DataIndexedDB.push(new Array(cursor.value));

                                                cursor.continue();
                                            }
                                            else {
                                            }
                                            this.setState({ProductDetails:DataIndexedDB});
                                        }

                                    }

                                }
                            }
                        }
                    catch (error) {
                            alert(error);
                        }
                    }
                }
            }
        }
        catch (error) {
            alert(error);
        }
    }

    render() {
        return (
            <table>
                   {this.state.ProductDetails.map((item =>
                   <tr><td key={item.id}>{item.id}</td><td>{item.sku}</td></tr>
            ))}



            </table>
        );
    }
}
export default Test;
パイレックスによる輝き
hashmapにslotを追加する