我將一個物件傳遞給一個苗條的組件（來自 Electron 主行程），雖然它在控制臺中完美顯示，但我無法訪問其中的陣列。但是，當我從控制臺（或使用）復制物件JSON.stringify(testObject)并直接使用它（-> copiedObject）時，它可以作業：
<script>
let testObject = {};
window.electronAPI.testDataM2R((m2rData) => {
testObject = m2rData;
console.log("testObject:", testObject);
});
let copiedObject = {
filename: "testResults.csv",
readRows: 3,
invalidRows: 0,
finishedReading: true,
data: [
{
tcName: "",
tcSuccess: true,
tcFunctions: [],
},
{
tcName: "TestClass",
tcSuccess: false,
tcFunctions: [
{
tfName: "testBasics",
tfSuccess: true,
tfEntries: [
{
teSuccess: true,
teLine: "6",
teAssertType: "ASSERT_EQUAL",
teComment: "1 == 1",
},
],
},
{
tfName: "basicTest",
tfSuccess: false,
tfEntries: [
{
teSuccess: false,
teLine: "145",
teAssertType: "ASSERT_EQUAL",
teComment: "0.25 == p.getTest()",
},
],
},
],
},
],
};
</script>
<p>{JSON.stringify(testObject)}</p> <!-- this output is exactly the same as the line below -->
<p>{JSON.stringify(copiedObject)}</p> <!-- this output is exactly the same as the line above -->
<p>{testObject.filename}</p> <!-- this works -->
<p>{copiedObject.filename}</p> <!-- this works -->
<p>{testObject.data[1].tcFunctions[0].tfName}</p> <!-- this DOES NOT work -->
<p>{copiedObject.data[1].tcFunctions[0].tfName}</p> <!-- this works -->
所以最后兩行很重要 - 為什么testObject.data[1].tcFunctions[0].tfName給我：
未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“1”）
雖然這樣copiedObject.data[1].tcFunctions[0].tfName做了，但這只是 ? 的輸出{JSON.stringify(testObject)}？
顯然，我需要能夠遍歷物件陣列以顯示所有元素，因此我非常感謝您對此的幫助！
先感謝您！
uj5u.com熱心網友回復：
發生的事情是最初testObject只是{}，這意味著{testObject.data[1].tcFunctions[0].tfName}會給你一個錯誤，因為它試圖讀取一個不存在的陣列的第一個元素，因此錯誤Uncaught TypeError: Cannot read properties of undefined (reading '1')
為什么它對其他兩個選項有效？
JSON.stringify(testObject)將最初列印{}
testObject.filename將最初列印undefined
那里沒有錯誤！
在您的電子函式運行后，testObject將填充屬性并啟動反應性，并在必要時更新標記。
從技術上講，它首先說undefined然后testResults.csv，但這種情況發生得非常快，以至于你沒有注意到。
添加最后一行確實會引發錯誤，因為它試圖從不存在的東西中讀取一些東西。
如何解決這個問題？
簡單地在混合中添加可選鏈接：
{testObject.data?.[1].tcFunctions[0].tfName}
這?.基本上是說“只有在資料存在時才做其余的事情”，所以它最初會快捷，不會給出任何錯誤！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/447658.html
標籤：javascript 数组 目的 电子 苗条
上一篇：將值插入物件并回傳值
下一篇：如何根據數字對物件陣列進行排序？