es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • useState y localStorage: el argumento de tipo ‘string null’ no se puede asignar al parámetro de tipo ‘string’.

useState y localStorage: el argumento de tipo ‘string null’ no se puede asignar al parámetro de tipo ‘string’.

20 Jul, 2023 Programación

Estoy usando NextJS y estoy tratando de hacer que un estado persista utilizando localStorage, lo hice de la siguiente manera:

const [reportFavorite, setReportFavorite] = useState([
    'captura',
    'software',
    'upload',
  ] as any)

useEffect(() => {
    setReportFavorite(JSON.parse(window.localStorage.getItem('reportFavorite')))
  }, [])

useEffect(() => {
    window.localStorage.setItem('reportFavorite', reportFavorite)
  }, [reportFavorite])

Pero TypeScript devuelve este error: “el argumento de tipo ‘string | null’ no se puede asignar al parámetro de tipo ‘string'”.

Leí algunas respuestas en StackOverflow que me dijeron que si hacía esto:

useEffect(() => {
    setReportFavorite(JSON.parse(window.localStorage.getItem('reportFavorite')!))
  }, [])

Usando el “!”, se solucionaría, pero no lo hizo, si hago eso obtengo otro error que dice “carácter inválido en la línea”.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error argumento de tipo 'string | null' no es asignable a un parámetro de tipo 'string' se debe a que window.localStorage.getItem('reportFavorite') puede devolver null si no se encuentra la clave. Para solucionarlo, debes comprobar primero si el valor no es null antes de llamar a JSON.parse():

    useEffect(() => {
  const storedReportFavorite = window.localStorage.getItem('reportFavorite')
  if (storedReportFavorite) {
    setReportFavorite(JSON.parse(storedReportFavorite))
  }
}, [])

useEffect(() => {
  window.localStorage.setItem('reportFavorite', JSON.stringify(reportFavorite))
}, [reportFavorite])

    Además, al establecer el elemento reportFavorite en el almacenamiento local, debes llamar a JSON.stringify() para convertir el array en una cadena de texto.

Comments are closed.