JavaScript 数组不会更新并且无法在输入中键入任何内容

Question

当我在我的费用管理器网站上单击 'create note' 按钮时，出现了编辑页面，但一直在尝试重新加载，我无法在任何输入中输入任何内容。

我收到一个错误：“无法读取未定义的属性 'title'”和一条消息：“限制导航以防止浏览器挂起。命令行开关 --disable-ipc-flooding-protection 可用于绕过保护'

我希望能够创建费用并在返回主页时看到它的更新，但是我什至无法输入任何内容，而且无论如何也不会更新任何内容。

// JS代码

// Read existing expenses from localStorage
const getSavedExpenses = function () {
    const expensesJSON = localStorage.getItem('expenses')

    if (expensesJSON !== null) {
        return JSON.parse(expensesJSON)
    } else {
        return []
    }
}
// Save expenses to localStorage
const saveExpenses = (expenses) => {
    localStorage.setItem('expenses', JSON.stringify(expenses))
}

const titleElement = document.querySelector('#expense-title')
const bodyElement = document.querySelector('#expense-body')
const removeElement = document.querySelector('#remove-note')
const expenseId = location.hash.substring(1)
const expenses = getSavedExpenses()
const expense = expenses.find(function (expense) {
    return expense.id === expenseId
})

// Get the DOM elements for an individual expense
const generateExpenseDOM = function (expense) {
    const expenseEl = document.createElement('div')
    const textEl = document.createElement('a')
    const removeButton = document.createElement('button')

// Setup the expense text
if (expense.title.length > 0) {
    textEl.textContent = expense.title
} else {
    textEl.textContent = 'Unnamed note'
}
textEl.setAttribute('href', `expense-edit.html#${expense.id}`)
expenseEl.appendChild(textEl)


// Remove expense by id
const removeExpense = function (id) {
const expenseIndex = expenses.findIndex(function (expense) {
return expense.id === id
})
if (expenseIndex > -1) {
    expenses.splice(expenseIndex, 1)
  }
}

// Setup the remove expense button
removeButton.textContent = 'x'
expenseEl.appendChild(removeButton)
removeButton.addEventListener('click', function () {
    removeExpense(expense.id)
    getSavedExpenses(expenses)
    renderExpenses(expenses, filters)
})
return expenseEl
}

if (expense === undefined) {
    location.assign('expense-edit.html')
}

titleElement.value = expense.title
bodyElement.value = expense.body

titleElement.addEventListener('input', function (e) {
    expense.title = e.target.value
    savedExpenses(expenses)
})
// add new expenses
document.querySelector('#new-expense').addEventListener('click', function (e) {
   const id = uuidv4()
      expenses.push({
         id: id,
         title: '',
         body: ''
      })
      getSavedExpenses()
     location.assign(`/expense-edit.html#${id}`)
   })

// HTML代码

   <input id="title" placeholder="Expense title">
    <textarea id="body" placeholder="Expense body"></textarea>
    <button id="remove-expenses">Remove expense</button>
<script src="expenses-functions.js"></script>
<script src="expenses-edit.js"></script>

   <input id="search-text" type="text" placeholder="Filter todos">
     <div id="expenses"></div>
    <button id="new-expense">Submit</button>
    <script src="/uuidv4.js"></script>
    <script src="/expenses-functions.js"></script>
    <script src="/expenses-app.js"></script>

Answer 1

有两个地方可以使用 location.assign()，导航到新页面。

我猜这个一直在触发：

if (expense === undefined) {
    location.assign('expense-edit.html')
}

expense 未定义，因此页面重新加载； expense 未定义，因此页面将重新加载...

找出为什么 expense 没有值。（您也可以只注释掉这些行以确认这确实是问题所在。）

更新： 此外，我认为您假设变量（如 expenses 数组）在页面加载期间持续存在。 JS 变量不会跨页面加载持续存在。调用location.assign()后，allJS变量重置。

所以这部分代码实际上没有做任何事情：

expenses.push({
     id: id,
     title: '',
     body: ''
  })

我不确定 getSavedExpenses() 中发生了什么，我想也许变量是通过 localstorage 之类的方式保留在那里的。（否则这可能也是死代码，因为它的 return 值甚至没有被使用。）

有两种方法可以跨 "page loads" 保存数据：

将数据保存到持久存储中，例如数据库或本地存储。然后在下次加载页面时重新加载数据。如果使用数据库，通常来自表单的数据通过 API 请求发送到数据库服务器。
不要重新加载页面；通过 JS 修改页面 DOM（所以它可能看起来像页面 "reloaded."）

更新 2：

TypeError: Cannot set property 'value' of null

此错误是由于试图访问一个名为 value 的属性变量值 null 引起的。在您的代码中，这发生在两个地方：

titleElement.value = expense.title
bodyElement.value = expense.body

遇到错误后，JS停止执行。这可能是 localStorage.getItem('expenses') 结果为空的原因。

JavaScript 数组不会更新并且无法在输入中键入任何内容

JavaScript array won't update and can't type anything in inputs

html

javascript

arrays

uuid

input