javascript - 未捕获的类型错误 : Cannot read property 'done' of undefined Javascript

Question

这几天一直在努力解决这个问题。令人惊讶的是，我的复选框和 Localstorage 都有效，但在控制台中，它显示错误“Uncaught TypeError: Cannot read property 'done' of undefined”。我已尽力解决此问题以使错误消失但没有运气。我知道我正在尝试调用不存在的“.done”属性，但我该如何解决这个问题？我用谷歌搜索并阅读了所有关于 SO 的类似问题。

我认为在控制台中忽略此错误是 Not Acceptable ，对吧？有人可以指导/帮助我吗？请只使用 JavaScript，不要使用 jQuery。谢谢!

错误来自函数 checkAll() 和 uncheckAll()。

function checkAll() {
var getInputs = document.getElementsByTagName("input");
for (var i = 0, max = getInputs.length; i < max; i++) {
    if (getInputs[i].type === 'checkbox')
    getInputs[i].checked = true;            
    items[i].done = true; 
    localStorage.setItem('items', JSON.stringify(items));        
    }
}

和

function uncheckAll() {
var getInputs = document.getElementsByTagName("input");
for (var i = 0, max = getInputs.length; i < max; i++) {
    if (getInputs[i].type === 'checkbox') 
     getInputs[i].checked = false;               
     items[i].done = false; 
     localStorage.setItem('items', JSON.stringify(items));
     } 
}

我的代码如下:

<script>
  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = JSON.parse(localStorage.getItem('items')) || [];

  function addItem(e) {
    e.preventDefault();
    const text = (this.querySelector('[name=item]')).value;
    const item = {
        text,
        done: false
    };

    items.push(item);
    populateList(items, itemsList);
    localStorage.setItem('items', JSON.stringify(items));
    this.reset();
  }

  function populateList(plates = [], platesList) {
    platesList.innerHTML = plates.map((plate, i) => {
        return `
            <li>
            <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
            <label for="item${i}">${plate.text}</label>
            </li>
        `;
    }).join('');
  }

function toggleDone(e) {
    if(!e.target.matches('input')) return; //skip unless its an input
    const el = e.target;
    const index = el.dataset.index;
    items[index].done = !items[index].done;
    localStorage.setItem('items', JSON.stringify(items));
    populateList(items, itemsList);
}
  addItems.addEventListener('submit', addItem);
  itemsList.addEventListener('click', toggleDone);

  populateList(items, itemsList);

// Challenge: Button: clear all, check all, uncheck all

function checkAll() {
    var getInputs = document.getElementsByTagName("input");
    for (var i = 0, max = getInputs.length; i < max; i++) {
        if (getInputs[i].type === 'checkbox')
        getInputs[i].checked = true;            
        items[i].done = true; 
        localStorage.setItem('items', JSON.stringify(items));        
        }
}

function uncheckAll() {
    var getInputs = document.getElementsByTagName("input");
    for (var i = 0, max = getInputs.length; i < max; i++) {
        if (getInputs[i].type === 'checkbox') 
         getInputs[i].checked = false;               
         items[i].done = false; 
         localStorage.setItem('items', JSON.stringify(items));
         } 
}

function clearItem() {
    localStorage.clear();   
    var element = document.getElementById("plates");
    element.parentNode.removeChild(element);
    location.reload();      
    console.log('Items cleared in localStorage');
  }
</script>

Answer 1

因为你是将数组初始化为空，如果localstorage中没有设置items

const items = JSON.parse(localStorage.getItem('items')) || [];

您的 items[i] 可能是 undefined。

你需要改变

items[i].done = false;  //similarly for true

到

items[i] = items[i] || {};
items[i].done = false; //or true