IndexedDB Error : NotFoundError : Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found

Question

I have created a IndexedDB setup in my ReactJs PWA.

The following error is thrown:

NotFoundError: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.

at line userSearchDBtx = userSearchDB.transaction("userdata","readwrite")

My function looks like this:

function Users() {
  let userSearchDB,userSearchDBstore,userSearchDBtx;
  let userDbrequest = window.indexedDB.open("MyTestDatabase", 1);

useEffect(()=>{
  if (!window.indexedDB) {
      console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
  }

  else console.log("IndexedDB supported")

  userDbrequest.onupgradeneeded = function(event) { 
    userSearchDB = event.target.result;
    userSearchDBtx = event.target.transaction;
    userSearchDBstore = userSearchDB.createObjectStore("userdata",{keyPath:"uid"})
  };

  userDbrequest.onerror = function(event) {
    console.log("ERROR: " + event.target.errorCode)
  };

  userDbrequest.onsuccess = function(event) {
    console.log("IndexdDb Working")
    userSearchDB = event.target.result
    userSearchDBtx = userSearchDB.transaction("userdata","readwrite");
    userSearchDBstore = userSearchDBtx.objectStore("userdata");
  };
  //Here also put is unknown
  userSearchDBstore.put({uid:3854238974,phone:3257777,name:"shan",email:"1@1.com"})

},[])

}

Answer 1

let userDbrequest = window.indexedDB.open("MyTestDatabase", 1);

Place this line in useEffect()

The code should be

let userSearchDB,userSearchDBstore,userSearchDBtx,userDbrequest;

useEffect(()=>{
   userDbrequest = window.indexedDB.open("MyTestDatabase", 2);
   ...Conrinue your code
},[])

Also, Increment the version while doing so

Answer 2

You are calling userSearchDBstore.put(...) before the db connected, which means no guarantee upgrade needed callback completed, which means no guarantee store created.

You need to wait. Move the put call to within the open db request success callback so that it only runs once database is upgraded.

Answer 3

我发现原因是错误的 storeNames 在： const request = db .transaction(storeNames , "readwrite")