當 useState() 改變時如何渲染 React 功能組件？

Question

我有一個非常簡單的功能組件，它從 localStorage 獲取日期並顯示它。 我有兩個按鈕可以從日期中添加或刪除周數，並且我希望顯示新日期。 但是，該組件不會被渲染。

import React, { useState } from "react";
import { monthList } from "../common/lists";

const Navbar = () => {
  const [focusDate, setFocusDate] = useState(
    Number(localStorage.getItem("focusDate"))
  );

  const [month] = useState(new Date(focusDate).getMonth());
  const [year] = useState(new Date(focusDate).getFullYear());

  const onLeftClick = () => {
    setFocusDate(focusDate - 504000000); //one week
    localStorage.setItem("focusDate", focusDate);
  };

  const onRightClick = () => {
    setFocusDate(focusDate + 504000000);
    localStorage.setItem("focusDate", focusDate);
  };

  return (
    <div className="navbar-container">
      <div className="calendar-navigation-container">
        <div className="navbar-menu-item">
          <i onClick={onLeftClick} className="fas fa-chevron-left"></i>
        </div>
        <div onClick={onRightClick} className="navbar-menu-item">
          <i className="fas fa-chevron-right"></i>
        </div>
        <div className="calendar-year">{`${monthList[month]} ${year}`}</div>
      </div>
    </div>
  );
};

該組件的預期行為是它獲取時間戳，然后顯示該時間戳的月份和年份。 加載后，它正確顯示 2021 年 1 月，但是當我在 onLeftClick 上單擊幾次時它不會呈現組件，盡管我希望它顯示 2021 年 12 月。計算是正確的，我想我在這里缺少概念功能組件渲染。 使用 Class 組件會容易得多，但我也想學習功能性組件。 我在這里想念什么？

Answer 1

您似乎希望 setFocusDate 是同步的，但事實並非如此。 因此，如果您調用 setFocusDate 並在此之后（下一行）使用 focusDate 更新本地存儲，您不能期望本地存儲包含新的 focusDate 值。 例如，您可以在此處閱讀此內容。

在您的示例中，我懷疑本地存儲更新是使用先前的 state 值完成的，因為 setFocusDate 已安排但尚未由 React 執行。

如果要與 state 一起更新本地存儲（將 state 與本地存儲同步），那么您必須使用useEffect掛鈎，並在依賴項數組中使用 focusDate（useEffect 的第二個參數，因此當 focusDate 更改時，會觸發 useEffect）。 ：

useEffect(() => {
  // this function will be called after focusDate changed
  // update local storage here
}, [focusDate]);

除此之外，您可以使用專用掛鈎將本地存儲與組件 state 同步，如下所示： https://usehooks.com/useLocalStorage/

Answer 2

您不需要將月份和年份變量作為 state 的一部分，因為它們的值只計算一次。 只要斷言就足夠了

const month = new Date(focusDate).getMonth();
const year = ew Date(focusDate).getFullYear();