当您第一次运行组件时,它应该显示“1”,单击按钮时,将其追加3,它确实这样做了。localstorage内部的值也会改变,但是当我重新加载页面时,localstorage再次改变为1...我遗漏了什么呢?
import { useState, useEffect } from 'react'
function Test() {
const [testNum, setTestNum] = useState(1);
useEffect(() => {
const data = window.localStorage.getItem("MY_TEST_ITEM");
setTestNum(JSON.parse(data));
}, []);
useEffect(() => {
window.localStorage.setItem("MY_TEST_ITEM", JSON.stringify(testNum))
}, [testNum]);
return (
<div>
<h1>{testNum}</h1>
<button onClick={() => { setTestNum(testNum + 3) }}>Add</button>
</div>
)
}
export default Test
3条答案
按热度按时间bybem2ql1#
请尝试以下操作:
92dk7w1h2#
每次重新加载页面时,您的状态都会刷新。
将testNum设置为1,以便每次渲染时都将其设置为该值。
然后让这些useEffects同时运行
第二个useEffect将在第一个之前渲染,因此将localStorage设置为1。
在这种情况下实际上不需要UseEffect。
7dl7o3gd3#
基本上,您是说在每次页面刷新时给予“testNum”指定值 1,这意味着您的本地存储将始终在刷新时更新为初始值 1。因此,解决方案非常明显,您需要做的就是更改初始状态值,该值应为localStorage值,而不是硬编码值。
您还可以使用useMemo挂接来避免任何不必要的重新呈现