当 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();