SessionStorage 不使用挂载时调用的 useEffect 更新状态

Question

正在使用 useEffect 从 SessionStorage 中提取数据并尝试将它们一起传递以更新组件装载上的 useState。似乎问题是 WHEN 数据被传递到状态，因为传递一个固定的数字确实正确地更新了状态。

我实际看到的是，在卸载组件然后重新安装后，状态（正确地）重置为初始值，但 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])

我想我在这里遗漏了一些简单的东西

Answer 1

如果在useEffect中unMount的时候想清理一些东西，需要给参数一个空的排列。
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)
    };
  }, [])

Answer 2

好的，正如我所说 "I think I'm missing something simple here"。是这样的。我不小心将同一个 SessionStorage 插槽补水了两次，一次使用正确的更新数据，一次使用 stale/unused 第二个 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') 
  }, [])

我很抱歉 problem/solution 伙计们的平庸

Answer 3

在 useEffect 组件重新呈现时使用 localStorage 而不是 sessionStroage，并且无法保持会话。

    console.log(">>>>outside>>",localStorage.getItem('ltk'))
        // use local Storage
        useEffect(() => {
            fetch(url,{
                method: 'GET',
                headers: { 
                    'x-access-token':localStorage.getItem('ltk')
                }
            })
            .then((res) => res.json())
            .then((data) => {
                console.log(">>>>>",data)
                setUser(data)
            })
        },[])

SessionStorage 不使用挂载时调用的 useEffect 更新状态

SessionStorage doesn't update state with useEffect called on mount

session-storage

reactjs

react-hooks