我正在参加 Java-Script 训练营课程。

我尝试按照说明操作，但由于某种原因，在清除虚拟数组并引入 localstorage 解析和字符串化方法后，我收到一个未捕获的类型错误，引用渲染函数中的变量。

我将我的代码与讲师的代码进行了比较，但似乎找不到为什么他的代码没有出现同样的问题。

非常感谢您付出的时间和指导。

let todos = []

const filters = {
  searchText: '',
  hideCompleted: false
}

const todosJSON = localStorage.getItem('todos')

if (todosJSON !== null) {
  todos = JSON.parse(todosJSON)
}

const renderTodos = function(todos, filters) {
  const filteredTodos = todos.filter(function(todo) {
    return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
  })

  filteredTodos = filteredTodos.filter(function(todo) {
    if (filters.hideCompleted) {
      return !todo.completed
    } else {
      return true
    }
  })

  const incompleteTodos = filteredTodos.filter(function(todo) {
    return !todo.completed
  })

  document.querySelector("#todoList").innerHTML = ''

  const summary = document.createElement('h2')
  summary.textContent = `You have ${incompleteTodos.length} todos left`
  document.querySelector("#todoList").appendChild(summary)

  filteredTodos.forEach(function(todo) {
    const p = document.createElement('p')
    p.textContent = todo.text
    document.querySelector("#todoList").appendChild(p)
  })


}

renderTodos(todos, filters)

document.querySelector("#todo-searcher").addEventListener('input', function(e) {
  filters.searchText = e.target.value
  renderTodos(todos, filters)
})

document.querySelector("#textOfTodo").addEventListener('submit', function(e) {
  e.preventDefault()
  todos.push({
    text: e.target.elements.todoText.value,
    completed: false
  })
  localStorage.setItem('todos', JSON.stringify(todosJSON))
  renderTodos(todos, filters)
  e.target.elements.todoText.value = ''
})

document.querySelector("#hide-completed-todos").addEventListener('change', function(e) {
  filters.hideCompleted = e.target.checked
  renderTodos(todos, filters)
})

<h1>Todos</h1>
<input id="todo-searcher" type="text" placeholder="Search for a Todo">
<label>Hide Completed
                    <input id="hide-completed-todos" type="checkbox">
                    </label>
<div id="todoList"></div>
<form id="textOfTodo">
  <input type="text" placeholder="Todo Description" name="todoText">
  <button>Add Todo</button>
</form>

<script src="todo-app.js"></script>

讲师版本：

const renderTodos = function (todos, filters) {
    const filteredTodos = todos.filter(function (todo) {
        const searchTextMatch = todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
        const hideCompletedMatch = !filters.hideCompleted || !todo.completed

        return searchTextMatch && hideCompletedMatch
    })

    const incompleteTodos = filteredTodos.filter(function (todo) {
        return !todo.completed
    })

    document.querySelector('#todos').innerHTML = ''

    const summary = document.createElement('h2')
    summary.textContent = `You have ${incompleteTodos.length} todos left`
    document.querySelector('#todos').appendChild(summary)

    filteredTodos.forEach(function (todo) {
        const p = document.createElement('p')
        p.textContent = todo.text
        document.querySelector('#todos').appendChild(p)
    })
}