Question

为此奋斗。它以前工作过，但不确定为什么现在不行...

我有一个包含表单的ToDo应用，其中包含两个输入-一个输入 name 。还有一个用于 url 。

我应该能够编辑任何输入值。然后在本地存储中保存/更新更新后的数组对象。

如果我单击编辑按钮而不更改输入值，则会返回正确的索引号（0或1）。

但是如果我更改输入值。然后单击编辑值，返回 -1 。因此，我的其他功能无法正常工作，因为我的JS找不到正确的索引来更新对象。

这是代码段。我在做什么错了？

bookmarksArray: [
    {
        "name": "jane",
        "url": "http://www.jane.co.uk/"
    },
    {
        "name": "mark",
        "url": "http://www.google.com"
    }
]

  // UPDATE/EDIT EXISTING BOOKMARK
  list.addEventListener('click', event => {
    if (event.target.classList.contains('js-edit-url')) {
      const editName = event.target.parentElement.name.value;
      const editURL = event.target.parentElement.url.value;
      let constUpdatedOBj = {name: editName, url: editURL};

      const objIndex = bookMarksArray.findIndex(obj => obj.name === editName);

      console.log('editName', editName);
      console.log('editURL', editURL);
      console.log('objIndex', objIndex);

      bookMarksArray[objIndex] = constUpdatedOBj;
      window.localStorage.setItem("bookMarksArray", JSON.stringify(bookMarksArray));
    }
  });

Answer 1

如果您像这样从数组开始，这将按我预期的那样工作：

bookmarksArray: [
    {
        "name": "jane",
        "url": "http://www.jane.co.uk/"
    },
    {
        "name": "mark",
        "url": "http://www.google.com"
    }
];

然后在mark的输入中编辑名称tony，这实际上就是您得到的：

const objIndex = bookMarksArray.findIndex(obj => obj.name === 'tony');

bookmarksArray中不存在“ tony”，因此findIndex将返回-1。

您需要的是这些书签上的ID：

bookmarksArray: [
    {
        "id": 1,
        "name": "jane",
        "url": "http://www.jane.co.uk/"
    },
    {
        "id": 2,
        "name": "mark",
        "url": "http://www.google.com"
    }
];

然后让您的findIndex根据ID查找正确的记录：

const bookmarkId = event.target.parentElement.id.value;
const objIndex = bookMarksArray.findIndex(obj => obj.id === bookmarkId);

findIndex（）返回-1，而不是正确的索引号

1 个答案: