请尝试以下操作：

const [testNum, setTestNum] = useState(window.localStorage.getItem("MY_TEST_ITEM") === null ? 1 : window.localStorage.getItem("MY_TEST_ITEM"));

每次重新加载页面时，您的状态都会刷新。
将testNum设置为1，以便每次渲染时都将其设置为该值。

const [testNum, setTestNum] = useState(1);

然后让这些useEffects同时运行

useEffect(() => {
    const data = window.localStorage.getItem("MY_TEST_ITEM");
    setTestNum(JSON.parse(data));
}, []);

  useEffect(() => {
    window.localStorage.setItem("MY_TEST_ITEM", JSON.stringify(testNum))
}, [testNum]);

第二个useEffect将在第一个之前渲染，因此将localStorage设置为1。
在这种情况下实际上不需要UseEffect。

const storageValue = window.localStorage.getItem("MY_TEST_ITEM";
const [testNum, setTestNum] = useState(storageValue ?? 0 );

updateLocalStorageFunc(value){
   setTestNum(value)
   window.localStorage.setItem("MY_TEST_ITEM", JSON.stringify(testNum))
}

return (    
<div>
    <h1>{testNum}</h1>
    <button onClick={() => { updateLocalStorageFunc(testNum + 3) }   
</div>)

基本上，您是说在每次页面刷新时给予“testNum”指定值 1，这意味着您的本地存储将始终在刷新时更新为初始值 1。因此，解决方案非常明显，您需要做的就是更改初始状态值，该值应为localStorage值，而不是硬编码值。

const [loading, setLoading] = useState(true)
const [testNum, setTestNum] = useState(null)
const intialValue = 1

useEffect(() => {
    const localStorageValue = window.localStorage.getItem("YOUR_ITEM_KEY") || intialValue
    setTestNum(Number(localStorageValue))
    setLoading(false)
}, [])

useEffect(() => {
    testNum !== null && window.localStorage.setItem("YOUR_ITEM_KEY", testNum)
}, [testNum])

if(loading) return <div>Loading ...</div>
return(
    <>
        <div>testNum: {testNum}</div>
        <button onClick={e => setTestNum(testNum + 3)}>increment testNum by 3</button>
    </>
)

您还可以使用useMemo挂接来避免任何不必要的重新呈现