无法访问对象内的数组

Question

我正在将一个对象传递给一个 svelte 组件（来自 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 给我：

Uncaught TypeError: Cannot read properties of undefined (reading '1')

虽然这个 copiedObject.data[1].tcFunctions[0].tfName 确实如此，但它只是 {JSON.stringify(testObject)}?

的输出

显然，我需要能够遍历对象数组才能显示所有元素，因此非常感谢您对此提供帮助！

提前致谢！

Answer 1

发生的事情是最初 testObject 只是 {}，这意味着 {testObject.data[1].tcFunctions[0].tfName} 会给你一个错误，因为它试图读取数组的第一个元素不存在，因此错误 Uncaught TypeError: Cannot read properties of undefined (reading '1')

为什么它对其他两个选项有效？

JSON.stringify(testObject) 最初会打印 {} testObject.filename 最初会打印 undefined

那里没有错误！

在你的 electron 函数运行之后，testObject 将填充属性和反应性，必要时更新标记。

从技术上讲，它首先说 undefined，然后说 testResults.csv，但这种情况非常快，您没有注意到。

添加最后一行确实会引发错误，因为它试图从不存在的内容中读取内容。

如何解决这个问题？

简单地在混合中添加可选链接：

{testObject.data?.[1].tcFunctions[0].tfName}

?. 基本上说“只有在 data 存在时才做剩下的事情”所以它最初会快捷方式并且不会给出任何错误！

无法访问对象内的数组

Can't access array inside object

javascript

arrays

object

electron

svelte