setState in useEffect 不能與 localStorage 一起使用

Question

這似乎很不尋常。 我試圖簡單地在安裝時設置狀態，但它對我來說只是空白。

const [info, setState] = useState({
    user_1: '',
    user_2: '',
});

useEffect(() => {

    var personal_1 = window.localStorage.getItem('personal_1');
    var personal_2 = window.localStorage.getItem('personal_2');
    console.log(personal_1);
    if (personal_1 !== null && personal_2 !== null) {
        console.log('Make it easy')
        setState({
            ...info,
            user_1: personal_1,
            user_2: personal_2
        })
    }

}, [])

useEffect(() => {
    console.log('User personal_1 was changed to', info.user_1);
}, [info.user_1])

當我記錄此組件安裝的效果時，它顯示

personal_1
Make it easy
User personal_1 was changed to

出於某種原因，它沒有在安裝時將 state 設置為本地存儲的值，而是變為空白。 我認為它可能被組件中的其他地方設置為空白，但 info.personal_1 鈎子只被調用一次。 有誰知道為什么它可能會設置本地存儲項目，但是當存儲項目是普通字符串時會變為空白？

Answer 1

在第二個 useEffect 依賴項中添加如下信息：

useEffect(() => {
    if(info.user_1){
     console.log('User personal_1 was 
      changedto',info.user_1);
   }

 }, [info])

Answer 2

發生這種情況是因為您沒有成功setting本地存儲值。 因此，這些項目的值將始終為空白

您可以直接使用我在下面提供的自定義 React 鈎子 ( useLocalStorage ) 從localStorage獲取項目並將其設置到您的網絡應用程序中

鈎

import { useCallback, useState, useEffect } from "react"

// To use local storage to store, update info
export function useLocalStorage(key, defaultValue) {
  return useStorage(key, defaultValue, window.localStorage)
}

// Common code being used irresp of storage type -> local or session
function useStorage(key, defaultValue, storageObject) {
  
  // Set the "value" (in this hook's state, and return it to the component's state as well) to be the value at passed "key" in storage.
  //  Else, we set it to the defaultValue (which can be a value or a func returning a val)
  const [value, setValue] = useState(() => {
    const jsonValue = storageObject.getItem(key)
    if (jsonValue != null) return JSON.parse(jsonValue)

    if (typeof defaultValue === "function") {
      return defaultValue()
    } else {
      return defaultValue
    }
  })


  // To set a value in the storage using key-val pair
  useEffect(() => {
    if (value === undefined) return storageObject.removeItem(key)
    storageObject.setItem(key, JSON.stringify(value))
  }, [key, value, storageObject])

  // To remove value at given key 
  const remove = useCallback(() => {
    setValue(undefined)
  }, [])

  return [value, setValue, remove]
}

在組件中使用鈎子：

import { useLocalStorage } from "./useStorage"

export default function StorageComponent() {
  const [age, setAge, removeAge] = useLocalStorage("age", 26)

  return (
    <div>
      <div>
        {age}
      </div>
      <button onClick={() => setAge(40)}>Set Age</button>
      <button onClick={removeAge}>Remove Age</button>
    </div>
  )
}