Javascript SyntaxError:JSON.parse位置0处的JSON中出现意外标记u

完全初学者以下教程YouTube在这里！我在尝试创建WhatsApp克隆程序时，在JSON.parse（）的位置0处得到了错误SyntaxError:JSON中意外的标记u，我不知道为什么。 以下是代码的第一部分：

import { useEffect, useState } from 'react'

const PREFIX = 'whatsapp-clone-'

export default function useLocalStorage(key, initialValue) {
    const prefixedKey = PREFIX + key

    const [value, setValue] = useState(() => {
        const jsonValue = localStorage.getItem(prefixedKey)

        if (jsonValue != null) return JSON.parse(jsonValue)
        if (typeof initialValue === 'function') {
            return initialValue()
        } else {
            return initialValue
        }
    })

    useEffect(() => {
        localStorage.setItem(prefixedKey, JSON.stringify(value))
    }, [prefixedKey, value])

    return [value, setValue]
}

这是另一个重要部分：

import React from 'react';
import Login from './Login'
import useLocalStorage from '../hooks/useLocalStorage';

function App() {
  const [id, setId] = useLocalStorage('id')

  return (
    <>
      {id}
      <Login onIdSubmit={setId} />
    </>
  )
}

export default App;

从“React”导入React；
从“./Login”导入登录名
从“../hooks/useLocalStorage”导入useLocalStorage；
函数App（）{
const[id，setId]=useLocalStorage（'id'）
返回(
{id}
)
}
导出默认应用程序；

这是我遇到的第一个错误，我相信这会导致其他错误。

---

感谢您的帮助，我花了两个小时在谷歌上搜索，但都没有用。

因为您在没有第二个参数的情况下调用了

useLocalStorage（'id'）

，

initialValue

是

未定义的

if（jsonValue！=null）返回JSON.parse（jsonValue）
if（typeof initialValue==='function'）{
返回initialValue（）
}否则{
return initialValue//当'jsonValue'为null时，将执行此行
}

最初，
localStorage
不包含
whatsapp克隆id
-
jsonValue
为
null
，这会导致上面的
else
块运行，将
值设置为
未定义。（
初始值
是
未定义的
）

localStorage.setItem（prefixedKey、JSON.stringify（value））

当运行
useffect
代码时，在
whatsapp克隆id
键中设置
'undefined'
，因为
JSON.stringify（undefined）
是
undefined
。错误消息表示在运行
JSON.parse（jsonValue）
时无法解析JSON，因为第一个字符（在位置0处）是
u
，它不是有效的JSON（第一个字符必须是
{
）

修复方法很简单。仅当值存在时才将其设置为
initialValue
。否则，将其设置为
null
或
{}

const jsonValue=localStorage.getItem（prefixedKey）
if（jsonValue！=null）{
返回JSON.parse（jsonValue）
}
if（初始值的类型==“函数”）{
返回initialValue（）
}
如果（初始值）{
返回初始值
}
返回空

在尝试新代码之前，您必须运行
localStorage.removietem（'whatsapp-clone-id'）
。
localStorage.getItem（prefixedKey）
return？看起来它不是有效的JSON。@Arun Kumar Mohan我猜它返回“whatsapp clone-”（这是前缀）和key，但我不确定关键部分应该做什么，可能是随机生成的ID？如果运行
localStorage.getItem（'whatsapp-clone-ID'））
在浏览器控制台中，您可以看到存储在其中的内容。@Arun Kumar Mohan当我在调试器中运行它时，它会打开一个chrome选项卡，地址为localhost8080，并告诉我它无法访问站点，我在选项卡中尝试了React dev tools chrome extension，我正在运行整个程序，但这甚至没有任何作用。另外，我如何运行一个short代码片段？我对所有这些都不熟悉。您可以将
console.log（localStorage.getItem（'whatsapp-clone-id'））
添加到您的代码中，或者直接在浏览器控制台中运行它。