SessionStorage не обновляет состояние с помощью useEffect, вызываемого при монтировании - PullRequest
Новая
       32

SessionStorage не обновляет состояние с помощью useEffect, вызываемого при монтировании

0 голосов
/ 12 июня 2019

Получение данных из SessionStorage с помощью useEffect и попытка передать их для обновления useState при монтировании компонента. Кажется, что проблема в КОГДА , данные передаются в состояние, поскольку передача фиксированного числа действительно корректно обновляет состояние.

Что я на самом деле вижу, так это то, что после размонтирования и последующего повторного монтирования компонента состояние (правильно) сбрасывается к исходному значению, но значение, установленное в SessionStorage, не передается из useEffect.

Может ли быть проблема в том, что useEffect действует как componentDidMount, а не componentWillMount?

На несвязанной заметке SessionStorage не сохраняется при обновлении страницы, что странно, поскольку я думал, что оно исчезает только при закрытии вкладки 



 const [movieCounter, setMovieCounter] = useState<number>(1)
  const [serieCounter, setSerieCounter] = useState<number>(1)
  console.log(movieCounter + ' state') // this logs 1 after re-mount


  useEffect(() => {
    return () => {
      //this works
      sessionStorage.setItem('abc123', JSON.stringify(movieCounter))
      sessionStorage.setItem('qwerty', JSON.stringify(serieCounter))
    };
  }, [movieCounter, serieCounter])


  useEffect(() => {
    const rehydrate1 = JSON.parse(sessionStorage.getItem('abc123') || '{}')
    const rehydrate2 = JSON.parse(sessionStorage.getItem('qwerty') || '{}')
    setMovieCounter(rehydrate1)
    setMovieCounter(rehydrate2)

    // here if I pass a fixed number i.e. 4 updates state correctly to 4 
    // on mount
    // setMovieCounter(4)


    // this logs actual value pulled from sessionstorage
    console.log(rehydrate1 + ' json') 
  }, [])

Состояние при монтировании необходимо обновить из значений SessionStorage.

UPDATE

хорошо, поэтому я просто заметил, что если я передам фиксированное число в возвращаемой функции первого useEffect, значение передается в состояние при каждом монтировании. 


// this updates the state to 60 after every re-mount of the component

useEffect(() => {
    return () => {
      sessionStorage.setItem('abc123', JSON.stringify(60))
      sessionStorage.setItem('qwerty', JSON.stringify(60))
    };
  }, [movieCounter, serieCounter])

Я думаю, мне здесь не хватает чего-то простого

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Хорошо, так как я сказал: «Я думаю, что мне здесь не хватает чего-то простого».Это был случай.Я случайно повторно выпил один и тот же слот SessionStorage дважды, один раз с правильными обновленными данными и один раз с устаревшим / неиспользованным вторым использованием состояния 


useEffect(() => {
    const rehydrate1 = JSON.parse(sessionStorage.getItem('abc123') || '{}')
    const rehydrate2 = JSON.parse(sessionStorage.getItem('qwerty') || '{}')

    // here was the problem
    setMovieCounter(rehydrate1)
    setMovieCounter(rehydrate2)


    console.log(rehydrate1 + ' json') 
  }, [])

Извините за банальность проблемы / решения, ребята

0 голосов
/ 12 июня 2019

  • Если вы хотите очистить что-то, когда вы отключаете от useEffect, вам нужно дать параметру пустое расположение.

  • JSON.parse не подходит, когда номер дескриптора. 

useEffect(() => {
    const rehydrate1 = parseInt(sessionStorage.getItem('abc123') || '1')
    const rehydrate2 = parseInt(sessionStorage.getItem('qwerty') || '1')

    setMovieCounter(rehydrate1)
    setMovieCounter(rehydrate2) // I think it is also wrong. setMovieCounter was called two times.

    return () => {
      sessionStorage.setItem('abc123', movieCounter)
      sessionStorage.setItem('qwerty', serieCounter)
    };
  }, [])
...