使用 sessionStorage 時 UseEffect 不會觸發 setState

Question

嘿，我有 go 這個代碼有問題。

const [itemsCart, setCart] = useState([]);
  useEffect(() => {
    (async function (){
      const buffer = await JSON.parse(window.sessionStorage.getItem("itemsCart"))
      setCart(buffer);
      console.log(buffer);
      console.log(itemsCart);
    })()
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

緩沖區獲取數據，state 變量沒有。 我認為同步肯定有問題，但我無法解決這個問題。 output：這里

Answer 1

這個問題不正確，解決問題的方法也不正確（無論您要解決什么問題）。 React 有不同的設計。

您正在嘗試獲取項目，然后在使用 useEffect 獲取項目后對其進行設置。

最好的方法是將您的數組作為來自高階組件的道具傳遞，然后在依賴項觸發后使用您的 useEffect（傳遞的道具）

在渲染組件之前運行 useEffect 鈎子

Answer 2

發生這種情況是因為 react 將等到 useEffect 中的所有腳本被調用，然后 setState 將觸發重新渲染。 因為可以有多個 setState，我們只想重新渲染一次。 這意味着，您在重新渲染后實際存在之前在console.log(itemsCart)中記錄舊值。

您可以在更新 sessionStorage 之前使用第二個useEffect對其進行登錄，您將看到 state 已更改。 或者您可以為此創建新的 useEffect

useEffect(()=>{
 console.log(itemsCart)
},[itemsCart]);

Answer 3

這有效：

const [itemsCart, setCart] = useState(JSON.parse(window.localStorage.getItem("itemsCart")));

  useEffect(() => {
    console.log(itemsCart);
    window.localStorage.setItem("itemsCart", JSON.stringify(itemsCart));
  }, [itemsCart]);

Answer 4

要運行第二個itemsCart useEffect() ，需要先通過 useState() 修改 itemsCart。 當您調用setItemsCart() useEffect()中看不到。