Question

因此，当控制台上出现“books.push不是功能错误”时，我正在关注一个在线课程的视频，我无法摆脱它！我甚至下载了作者的代码，它也在那里。每当我尝试添加一本书时，页面只会重新加载并且没有任何反应，它甚至不会被添加到LS中。顺便说一句其他的方法都是空的，因为我在这个沉默的噩梦虫出现后停了下来。

更新：为了让事情变得更加奇怪，在CodePen上工作得很好，数据被添加到localStorage，但是当它在live server @ Firefox上运行时，bug仍然存在。这是一个浏览器错误吗？

请查看以下链接

https://codepen.io/mateusmlo/pen/JZKbar

    static addBook(book){
    const books = Store.getBooks();

    books.push(book);

    localStorage.setItem('books', JSON.stringify(books));
}

static removeBook(){

}

更新2：确定所以它确实是一个浏览器问题，对不起我没有说它是Firefox开发者版，在普通的Firefox上它没有发生。但是每个人都给了我一些宝贵的见解，我将来会做些笔记。感谢你们！

Answer 1

我在一本书中得到了你不想一次介绍太多东西而作者不得不采取一些快捷方式，但如果你的代码需要一些数组，那么它实际应该检查（或者有一个静态类型检查器检查它实际上是一个数组。 getBooks方法应该重写如下：

static getBooks () {
  const stored = localStorage.getItem('books');
  let books = []; // default to empty array

  // need the try-catch here because the parse can fail
  try {
    const parsed = JSON.parse(stored);
    if (Array.isArray(parsed)) { // check that it's an array
      books = parsed;
    } // else leave books as default
  } catch (e) {
    // no-op, leave books as default
  }

  return books;
}

现在代码将

始终返回一个数组，而不是其他任何内容
永远成功。有一个非常强大的约定，getter永远不应该抛出，并且解析可能在原始方法中失败。

如果您进行无意义的微优化，如果try/catch为stored或null，您还可以添加提前退货以跳过undefined。

原作几乎肯定是失败的，因为这样的事情发生了：

localStorage.setItem('books', JSON.stringify({})); // NOTE: {} not []

现在检索它时：

if (localStorage.getItem('books') === null) { // this will be false, because it's not null

之后

books.push(whatever); // oops! books is {} not []! No push method for you

这可以解释为什么刷新不能修复它，以及为什么相同的代码在不同的页面上运行得很好（例如codepen）。如果您在该页面上打开控制台并键入localStorage.setItem('books', '[]')，您可能会突然看到问题消失。

试图将项目添加到localStorage但陷入无休止的刷新地狱

1 个答案: