调用localStorage时触发解析错误：期望表达式或逗号

错误代码分析 #

你编写的getPosts函数存在语法冗余，直接触发了编译解析错误：

export const getPosts = async () => {
    try {
        // 错误核心：JSON.parse是同步函数，无需await包裹
        const posts = await JSON.parse(localStorage?.getItem('Posts') || "{}")
        return posts
    } catch (error) {
        return error
    }
}

React组件中的调用代码本身语法无错，但依赖的getPosts函数问题会传递触发编译错误：

const [ posts, setPosts ] = useState<Posts[]>()

useEffect(() => {
    getPosts().then((res) => {
        setPosts(res)
    })
}, [])

修复步骤 #

1. 移除多余的await
   JSON.parse是同步操作，await仅用于Promise对象，这是导致"Expression or comma expected"解析错误的关键原因。修改后的getPosts函数：

export const getPosts = () => {
    try {
        // 用[]作为默认值，匹配组件中Posts[]的类型
        const postsStr = localStorage?.getItem('Posts') || "[]"
        const posts = JSON.parse(postsStr)
        return posts
    } catch (error) {
        console.error('解析帖子数据失败:', error)
        // 错误时返回空数组，避免将错误对象赋值给状态
        return []
    }
}

2. 优化类型匹配与错误处理

• 将默认值从"{}"改为"[]"，确保与组件中Posts[]的状态类型一致，避免后续渲染时的类型不兼容问题。
• catch块中不要直接返回error，而是返回空数组并打印错误日志，防止错误对象被赋值给posts状态导致页面崩溃。

3. 简化组件调用（可选）
   修改后的getPosts不再是异步函数，无需链式调用then，可以直接在useEffect中执行：

useEffect(() => {
    const postsData = getPosts()
    setPosts(postsData)
}, [])

验证数据格式 #

你存储在localStorage中的Posts数据是合法的JSON数组字符串，修复后可以正常解析为Posts数组，完全匹配组件的状态类型。

内容的提问来源于stack exchange，提问作者Rodrigo Burgos