表单提交更新嵌套数组失败：JSON解析错误与undefined问题求助

核心问题 #

报错"undefined" is not valid JSON说明本地存储中被写入了无效的JSON字符串，根源在于两点：

1. edit.js未判断目标城市是否存在，当cities.find()找不到对应cityId的城市时，city为undefined，执行city.landmarks.push()会抛出错误，可能导致saveCities保存异常数据；
2. getSavedCities或saveCities函数未做容错处理，当本地存储无数据或数据损坏时，直接执行JSON.parse引发崩溃。

代码修复步骤 #

1. 修复edit.js的城市存在性判断 #

在操作地标前先确认找到目标城市，避免操作undefined：

const cityId = location.hash.substring(1)
const cities = getSavedCities()
const city = cities.find((city) => city.id === cityId)
const nameH2 = document.querySelector('#city-name')
const home = document.querySelector('#home')

// 找不到对应城市时跳回首页
if (!city) {
    location.href = 'index.html'
    return
}

nameH2.textContent = city.name

document.querySelector('#landmarks').addEventListener('submit', (e) => {
    e.preventDefault()
    const landmark = e.target.elements.landmarks.value.trim()
    // 过滤空输入
    if (landmark) {
        city.landmarks.push(landmark)
        saveCities()
        e.target.elements.landmarks.value = ''
    }
})

2. 修复getSavedCities和saveCities函数 #

确保函数能处理异常情况，保证数据有效性：

// functions.js中的getSavedCities
function getSavedCities() {
    const citiesJSON = localStorage.getItem('cities')
    // 解析失败或无数据时返回空数组
    try {
        return citiesJSON ? JSON.parse(citiesJSON) : []
    } catch (e) {
        console.error('解析城市数据失败', e)
        return []
    }
}

// functions.js中的saveCities
function saveCities() {
    // 仅保存有效数组
    if (Array.isArray(cities)) {
        localStorage.setItem('cities', JSON.stringify(cities))
    } else {
        console.error('保存失败：cities不是有效数组')
    }
}

3. 清理无效的本地存储数据 #

当前本地存储中可能已存在无效数据，打开浏览器控制台（F12）执行以下命令清理：

localStorage.removeItem('cities')

额外优化点 #

• edit.js表单提交事件中无需重复调用cities.find()，直接复用顶部已获取的city变量；
• 添加trim()过滤地标输入的空白字符，避免存入空字符串。

内容的提问来源于stack exchange，提问作者Robert Barr