Не хранится localStorage в React?

Question

[jIVOYz]

Всё вроде нормально, состояние ( words ) сохраняется в localStorage, но, при перезагрузке страницы оно удалятся. Не понимаю почему?

import { useState, useEffect } from 'react'
import Form from '../../components/Form/Form'
import WordList from '../../components/WordList/WordList'
import WarningMessage from '../../components/UI/WarningMessage/WarningMessage'
function App() {
  const [words, setWords] = useState([])
  const [error, setError] = useState(false)

  const addWord = (word, translation, example, british) => {
    const newWord = {
      id: Math.random().toString(18),
      word: word,
      translation: translation,
      example: example,
      british: british,
    }

    !newWord.word == '' && !newWord.translation == '' ? setWords([...words, newWord]) : setError(true)
    localStorage.setItem('words', JSON.stringify(words))
  }

  useEffect(() => {
    const data = localStorage.getItem('words')
    if (data !== null) setWords(JSON.parse(data))
  }, [])

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

  return (
    <>
      {error ? (
        <WarningMessage setError={setError}>Error! Fill the fields (Word and Translation)</WarningMessage>
      ) : null}
      <Form addWord={addWord} />
      <WordList words={words} />
    </>
  )
}

export default App

Answer 1

[Даша Циклаури]

да потому что

const [words, setWords] = useState([])

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

у тебя инициализация пустого массива, по которому срабатывает эффект, который пишет пустой массив в сторадж. Читай документацию useState, подсказка useState(() => {...})