当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月，但是当我在onLefthtml上单击几次时，它并没有呈现组件，尽管我期望它显示2021年12月。计算是正确的，我想我在这里丢失了功能组件渲染的概念。对于Class组件来说，这会容易得多，但我也想学习功能性组件。我错过了什么？

Answer 1

您不需要将月份和年份变量作为状态的一部分，因为它们的值只计算一次。只要断言就足够了

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

Answer 2

似乎您希望setFocusDate是同步的，但事实并非如此。因此，如果调用setFocusDate，然后（下一行）用focusDate更新本地存储，则不能期望本地存储包含新的focusDate值。例如，你可以在这里读一篇文章。

在您的示例中，我怀疑本地存储更新是使用先前的状态值完成的，因为setFocusDate已计划，但尚未由React执行。

如果要随状态一起更新本地存储（将状态与本地存储同步），则必须使用useEffect挂钩，并在依赖项数组中使用focusDate（useEffect的第二个参数，因此当focusDate更改时，将触发useEffect）。：

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

除此之外，您还可以使用专用钩子将本地存储与组件状态同步，如下所示：https://usehooks.com/useLocalStorage/