SessionStorage не обновляет состояние при вызове useEffect при монтировании

Получение данных из 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.

ОБНОВЛЕНИЕ

Хорошо, поэтому я просто заметил, что если я передаю фиксированное число в возвращаемой функции первого 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])

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


reactjs react-hooks session-storage
person grenos    schedule 12.06.2019    source источник
comment
Какие данные находятся в sessionStoarge abc123?   -  person bkm412    schedule 12.06.2019
comment
если вы имеете в виду какой тип, это число   -  person grenos    schedule 12.06.2019

Ответы (2)


arrow_upward
0
arrow_downward

  • Если вы хотите что-то очистить при отключении от 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)
    };
  }, [])
person bkm412    schedule 12.06.2019
comment
Ну, если не передать movieCounter и serieCounter в массиве, это не приведет к обновлению хранилища сеансов. - person grenos; 12.06.2019
comment
Если вы хотите обновить sessionStorage, удалите return в своем коде. Он будет обновляться каждый раз при изменении состояния. - person bkm412; 12.06.2019
comment
да. Хотя это правильно (и то, как я его использую, является своего рода анти-шаблоном), поскольку я включил две переменные в массив, sessionStorage все еще обновляется. Это не моя проблема, как я четко указал в своем вопросе. SessionStorage обновляется правильно. - person grenos; 12.06.2019

arrow_upward
0
arrow_downward

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


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') 
  }, [])

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

person grenos    schedule 12.06.2019