Javascript - 數組/對象存在於 console.log 中，但在訪問屬性時返回未定義

Question

我花了不真實的時間試圖找出問題所在。

我正在創建一個 chrome 插件來訪問 LinkedIn 頁面上的某些數據，並將其同步到 CRM/ATS。

如果我的代碼因不必要地使用異步或承諾而有些混亂，我深表歉意，但這是因為此時我已經嘗試了幾種解決方案。

我的變量quickbaseData記錄沒有問題，並返回給我一個對象列表。

然而，我的變量linkedinData ，我完全堅持。

我希望能夠從對象列表或object.data中讀取，這兩者都沒有關系。 我在這一點上都試過了。

問題是，無論我使用數組還是 object，只要我嘗試訪問變量，就會得到undefined 。 object 存在，但我無法訪問它的長度或屬性。

正如您在下面的示例中所見，當簡單地記錄 object 時，它能夠讀取數據，但是一旦我嘗試object.data或object?.data ，盡管控制台日志返回未定義或虛假值表明 object 具有屬性。

當我將 object 復制到終端中的節點實例時，我可以訪問 object 的屬性，但是在下面的代碼中，一旦我嘗試訪問屬性，它就會導致未定義

關於可能發生的事情有什么建議嗎？

function findLinkedinCandidateInQuickbase(linkedinData, quickbaseData) {
    console.log("Linkedin Data", linkedinData, linkedinData.data, Object.entries(linkedinData))
    // Logs the following: 
        // linkedinData - {data: {full_name: 'Lorem Ipsum', email: 'N/A', phone: 'N/A', linkedin: '<url>'} 
        // linkedinData.data - undefined. I've tried both with optional chaining and without.
        // Object.entries(linkedinData) - Array with length 0
    
    
    const length = quickbaseData.length

    const full_name = linkedinData?.full_name
    const email = linkedinData?.email
    const linkedin1 = linkedinData?.linkedin1
    const linkedin2 = linkedinData?.linkedin2
    const phone = linkedinData?.phone

    Promise.all([full_name, email, linkedin1, linkedin2, phone]).then(value => console.log("promise value", value)) // promise value (5) [undefined, undefined, undefined, undefined, undefined]

    console.log("rcvd: ", email, full_name, linkedin1, linkedin2, phone) // rcvd:  undefined undefined undefined undefined undefined
    for (let i = 0; i < length; i++) {
        // console.log(quickbaseData[i])
        let check = []
        if (quickbaseData[i].candidate_name === full_name) check.append(true);
        if (quickbaseData[i].email === email) check.append(true);
        if (quickbaseData[i].linkedin === linkedin1) check.append(true);
        if (quickbaseData[i].linkedin === linkedin2) check.append(true);
        if (quickbaseData[i].phone === phone) check.append(true);
        if (check.includes(true)) {
            return quickbaseData[i].record_id
        } 
    }
    return null;
}

async function linkedinFindCandidate () {
    let quickbaseData = await quickbaseCandidateData()
    let linkedinData = await linkedinCandidateData()

    Promise.all([linkedinData, quickbaseData]).then((res) => {
        console.log(res) // I receive an array containing two objects, both objects (linkedinData and quickbaseData) are populated with the correct properties, no issues here.
        let record_id = findLinkedinCandidateInQuickbase(res[0],res[1])
        if (record_id) {
            console.log("Candidate found: ", record_id)
        } else {
            console.log("I checked for a candidate but found none.")
        }
    })
}


export { linkedinFindCandidate };

編輯：

嘗試了以下，沒有運氣：

console.log("Linkedin Data", linkedinData) // has data shows up as expected
console.log("Linkedin Data", linkedinData?.data) // undefined
console.log("Linkedin Data", linkedinData.data)  // undefined
console.log("Linkedin Data", linkedinData["data"])  // undefined
console.log("Linkedin Data", JSON.stringify(linkedinData))  // empty object
console.log("Linkedin Data", Object.keys(linkedinData)) // empty array
console.log("Linkedin Data", Object.entries(linkedinData)) // empty array

Answer 1

我弄清楚了這個問題。

問題確實發生在linkedinCandidateData()

這是我的代碼片段：

function linkedinCandidateData() {
        let candidateData = {}
        var intervalId = window.setInterval(async function () {
            let grabbedData = await getCandidateData(candidateData, intervalId)
            candidateData["data"] = grabbedData

        }, 1000);
        console.log('linkedin_fetch_candidate_data: ', candidateData)
        return candidateData
    }

這將立即返回{} ，因為它不等待 setInterval 執行任何操作，因此當我調用 function 時不存在任何數據。

控制台顯示對象的“實時”版本，並不總是顯示 console.log() 時的數據。 最終 object 發生了變異，因此最終其中有數據，但在調用 findLinkedinCandidateInQuickbase() 時還沒有。

我之前計划使用 MutationObservers 重寫它，並在此過程中解決了它。

我最終將其重寫為：

async function linkedinCandidateData() {
    await waitForElm(".contact-info");
    let candidateData = await getCandidateData();
    console.log("Candidate data", candidateData);
    return await Promise.resolve(candidateData); // this might be redundant, but it works at least.
}

和 waitForElm（從 Stackoverflow 上的其他地方復制）

function waitForElm(selector) {
    return new Promise((resolve) => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver((mutations) => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    });
}