Question

使用useEffect从SessionStorage中提取数据，并尝试将其传递以更新组件安装上的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])

我想我这里缺少一些简单的东西

Answer 1

如果要在从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)
    };
  }, [])

Answer 2

好吧，正如我所说的：“我认为我在这里缺少一些简单的东西”。就是这种情况。我不小心对同一个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') 
  }, [])

对于问题/解决方案专家的平庸，我感到抱歉

SessionStorage不会使用mount上调用的useEffect更新状态

2 个答案: