无法存储数据IndexedDB无法在“ IDBObjectStore”上执行“添加”：评估对象存储的键路径未产生值

问题描述

因此，我创建了一个索引数据库，然后打算存储从api响应中获取的数据。但是有一个错误，我尝试检查响应中的数据是否传入，结果是否传入，但仍然出现错误，还尝试更改put（）方法。

错误

 **Uncaught (in promise) DOMException: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.**

索引

const playerDetails = ShowPlayerDetails();
        const savePlayerButton = document.getElementById("savePlayerButton");
        savePlayerButton.addEventListener("click",event => {
            playerDetails.then(response => {
                dbInsertPlayer(response);
            });
        });

IndexedDB

const idbPromised = idb.open("player-favourite-list",1,upgradeDb => {
    if(!upgradeDb.objectStoreNames.contains("players")){
        upgradeDb.createObjectStore("players",{autoIncrement: true});
    }
});
const dbInsertPlayer = playerData => {
    return new Promise((resolve,reject) => {
        idbPromised.then(db => {
            const transaction = db.transaction("players","readwrite");
            console.log(playerData);
            return transaction.objectStore("players").put(playerData);
        })
        .then(transaction => {
            if(transaction.complete){
                resolve(true);
            }
        })
        .catch(error => {
            reject(error);
        });
    });
}

FetchAPI

function ShowPlayerDetails(){
    return new Promise ((resolve,reject) => {

    let urlParams = new URLSearchParams(window.location.search);
    let idParam = urlParams.get("id");

    FetchAPI(`${BASE_URL}players/${idParam}`)
        .then(response => {
            const {name,nationality,countryOfBirth,dateOfBirth,position} = response;
            document.getElementById("player-name").innerHTML = name;
            document.getElementById("player-data").innerHTML = `
            <ul class="collection">
                <li class="collection-item">Name : ${name}</li>
                <li class="collection-item">Nationality : ${nationality}</li>
                <li class="collection-item">Country Of Birth : ${countryOfBirth}</li>
                <li class="collection-item">Date Of Birth : ${dateOfBirth}</li>
                <li class="collection-item">Position : ${position}</li>
            </ul>`;
            resolve(response);
        })
        .catch(error => reject(error));
    })
}

我的目标是将响应数据输入indexeddb，然后在另一时间显示。

API响应

countryOfBirth: "Senegal"
dateOfBirth: "1992-04-10"
firstName: "Sadio"
id: 3626
lastName: null
lastUpdated: "2020-08-13T03:13:10Z"
name: "Sadio Mané"
nationality: "Senegal"
position: "Attacker"
shirtNumber: null

解决方法

因此，我在对象存储中添加了autoIncrement和keyPath，不要忘记通过存储浏览器删除数据库或升级当前的索引数据库版本。

代码

const idbPromised = idb.open("player-favourite-list",1,upgradeDb => {
    if(!upgradeDb.objectStoreNames.contains("players")){
        upgradeDb.createObjectStore("players",{keyPath: "Id",autoIncrement: true});
    }
});

异常引用MDN Indexed DB Documentation