Полный новичок, следящий за учебником на YouTube здесь! Я получаю сообщение об ошибке SyntaxError: Unexpected token u в JSON в позиции 0 в JSON.parse () при попытке создать программу клонирования WhatsApp, и я понятия не имею, почему. Вот первая часть кода:

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;

Вот первая ошибка, которую я получаю, которая, как мне кажется, приводит к остальным из них. errorimg1

Спасибо за любую помощь, я потратил около 2 часов на поиск в Google безрезультатно.

-1
Chris Topher 28 Фев 2021 в 09:22

1 ответ

Лучший ответ

Поскольку вы вызываете useLocalStorage('id') без второго аргумента, initialValue равно 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
}

Первоначально localStorage не содержит whatsapp-clone-id - jsonValue is null, что вызывает запуск блока else выше, устанавливая для value значение {{X6 }}. (initialValue равно undefined)

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

И когда выполняется код useEffect, 'undefined' устанавливается в ключе whatsapp-clone-id, поскольку JSON.stringify(undefined) равно undefined. В сообщении об ошибке говорится, что не удалось проанализировать JSON при запуске JSON.parse(jsonValue), поскольку первый символ (в позиции 0) - это u, который не является допустимым JSON (первый символ должен быть { ).

Исправить это просто. Устанавливайте значение initialValue, только если оно присутствует. В противном случае установите значение null или {}.

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

return null

Вам нужно будет запустить localStorage.removeItem('whatsapp-clone-id'), прежде чем пробовать новый код.

0
Arun Kumar Mohan 28 Фев 2021 в 07:31