Next.js中使用useEffect读取localStorage时出现JSON输入意外结束错误

你的代码里有几个关键问题导致了这个错误：

• localStorage.getItem返回null时，你设置的默认值是[]（数组），但JSON.parse只能处理JSON格式的字符串，直接传数组会触发解析错误。
• 组件首次渲染时，state的初始值是[]，此时顶层的JSON.parse(data)相当于解析数组，直接抛出错误。
• 解析逻辑放在组件顶层，会在useEffect执行前（也就是还没从localStorage拿到数据时）就运行，导致用初始state值解析出错。

修正后的代码如下：

const JobsPage = () => {
  const [jobData, setJobData] = useState([])

  useEffect(() => {
    // 不存在时用JSON格式的空字符串作为默认值
    const storedDataStr = window.localStorage.getItem("Job") || "[]"
    try {
      const parsedData = JSON.parse(storedDataStr)
      // 确保最终存入state的是数组类型
      setJobData(Array.isArray(parsedData) ? parsedData : [])
    } catch (err) {
      console.error("解析localStorage数据失败:", err)
      setJobData([])
    }
  }, [])

  // 直接使用jobData即可，无需额外解析
  return (
    // 这里写你的组件内容
  )
}

关键修正说明：

1. 将默认值改为"[]"——这是合法的JSON空数组字符串，保证JSON.parse始终能拿到正确格式的输入。
2. 用try/catch包裹解析逻辑——就算localStorage里存了非法JSON，也不会导致组件崩溃，还能捕获错误信息。
3. 把解析逻辑移到useEffect内部——确保只有拿到localStorage数据后才进行解析，避免用初始state值触发错误。
4. 增加Array.isArray校验——防止localStorage里存的是非数组类型数据，保证state始终是数组，避免后续业务逻辑出错。

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