无法读取未定义的属性“名称”。定义了属性，变量也定义了？答案

【问题标题】：Cant read property "name" of undefined. Property is defined, and so is the variable?无法读取未定义的属性“名称”。定义了属性，变量也定义了？
【发布时间】：2020-06-03 18:45:09
【问题描述】：

我正在制作一个小型“笔记本”应用程序，它将创建、存储、编辑、删除多页文本数据。

我需要创建一个系统来检测您是否在列表的末尾，并创建一个新页面，然后在编辑器中更新文本。

我开始收到错误“无法读取未定义的属性“名称””，但它是“currentData”内明确定义的变量

我设法剪掉了大部分代码，这似乎是导致问题的原因：

let currentData,
 currentPage = 0;

if (window.localStorage.getItem("nbEditorData")) {
    currentData = JSON.parse(window.localStorage.getItem("nbEditorData"));
} else {
    currentData = [
         {
              name: "Page 1 Title", data: "Welcome"
         }
    ];
}

function visualizeData() {
    console.log(currentData);
    document.querySelector(".name").value = currentData[currentPage].name; // Error Occurs Here <-
    document.querySelector(".page").innerText = currentData[currentPage].data;
}

document.querySelector(".forward").addEventListener("click", e => {
    if (currentPage != currentPage.length) {
        currentPage++;
        visualizeData();
    } else {
        currentData.push({name: "New Page", data: ""});
        currentPage++;
        visualizeData();
    }

    if (currentPage + 1 == currentPage.length) {
        e.target.innerHTML = "????";
    }
});

完整代码在这里：https://codepen.io/SkylerSpark/pen/GRoRmzw

【问题讨论】：

currentData[currentPage] 在代码运行时是 undefined。你可能被this "feature" of console on browsers欺骗了。
@T.J.Crowder 我在查看时没有展开它。我在修改之前记录数组，并且在修改之前发出错误。另外，如果这是控制台中的视觉错误，它应该仍然能够在笔记本上创建一个新页面并将“新页面”放在其标题上。
@MisterSirCode 所以也要记录currentPage 的值。您可能会发现它设置为 1（位于数组末尾）
@Alnitak 但是...这正是我正在做的...我在该确切功能中的错误之前记录“currentData”
他说的是currentPage，而不是currentData。如果在该行设置断点，您会发现currentData[currentPage] 是undefined。 JavaScript 引擎对此并没有错。 :-)

标签： javascript object

【解决方案1】：

这一行是错误的：

if (currentPage != currentPage.length)

应该是指currentData.length。您可能还过早地增加了currentPage，导致对currentData 数组的访问超出其当前内容。

即使这样，测试也可能不正确。在一个格式良好的程序中，currentPage 永远不可能实际大于或等于 currentPage.length，因为 JS 数组是从零开始的。否则表示逻辑错误。

【讨论】：

好的，考虑到这些更改，错误消失了，我可以创建新页面、跳转页面和返回页面。但是，由于某种原因，我的逻辑仍然必须关闭，因为每次单击右箭头时它都会创建一个新页面，而不是仅仅跳转到以前创建的页面。你确定 if 语句会起作用吗？我更新了上面的 codepen 链接，如果您想查看更改
我希望逻辑读取（伪代码）if (current Page === currentData.length - 1) { add new page } ; move to next page
好吧，我只是尝试对 codepen 进行更改，然后我刷新了，我猜它搞砸了，因为我的 if 语句回到了“currentPage.length”，所以我再次更改了它们......现在我再次收到错误... FFS