语法错误：在 JSON 中的意外令牌 u 在 position 0 在 JSON.parse

Question

total beginner following a tutorial on YoutTube here: I get the error SyntaxError. Unexpected token u in JSON at position 0 at JSON.parse () while trying to create a WhatsApp clone program and I have no idea why: Here's the first part of the code:

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]
}

And here's the other essential part:

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;

Here's the first error I get, which I believe leads to the rest of them.

Thanks for any help, I spent like 2 hours googling to no avail.

Answer 1

Since you're calling useLocalStorage('id') without a second argument, initialValue is undefined .

if (jsonValue != null) return JSON.parse(jsonValue)
if (typeof initialValue === 'function') {
  return initialValue()
} else {
  return initialValue // this lines gets executed when `jsonValue` is null
}

Initially, localStorage does not contain whatsapp-clone-id — jsonValue is null which causes the else block above to run, setting value to undefined . ( initialValue is undefined )

localStorage.setItem(prefixedKey, JSON.stringify(value))

And when the useEffect code runs, 'undefined' is set in the whatsapp-clone-id key since JSON.stringify(undefined) is undefined . The error message says it couldn't parse the JSON on running JSON.parse(jsonValue) since the first character (at position 0) is u which is not valid JSON (The first character has to be { ).

The fix is simple. Only set the value to initialValue if it's present. Otherwise, set it to null or {} .

const jsonValue = localStorage.getItem(prefixedKey)
if (jsonValue != null) {
  return JSON.parse(jsonValue)
}
if (typeof initialValue === "function") {
  return initialValue()
}
if (initialValue) {
  return initialValue
}

return null

You'll have to run localStorage.removeItem('whatsapp-clone-id') before trying the new code.