React：更新第一个功能组件时渲染第二个功能组件

Question

我是功能组件的新手，并且很难根据localStorage 中的参数来弄清楚如何渲染彼此不相关的功能组件。我有两个组件：

第一个组件：从localStorage中获取一个变量，并且还有一个更新相同参数的按钮。

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

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

  useEffect(() => {}, [focusDate]);

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

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

  return (
    <div>
      <i onClick={onClick} className="fas fa-chevron-left"></i>
      <div className="data">{`${monthList[month]} ${year}`}</div>
    </div>
  );
};

export default First;

第二个组件也应该显示相同的数据：

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

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

  useEffect(() => {}, [focusDate]);

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

  return (
    <div>
      <div className="data">{`${monthList[month]} ${year}`}</div>
    </div>
  );
};

export default Second;

由于我在第一个组件中更新了 localStorage，并在第二个组件中使用了 useEffect 挂钩，因此我的期望是，每当数据在第一个组件中重新渲染时，它也应该在第二个组件中重新渲染。不过，这不会发生。我在这里错过了什么？

更新： 根据下面的建议，创建了一个父组件以将 focusDate 作为道具传递，但它返回 undefined。

import React, { useState, useEffect } from "react";

//Components
import First from "../layout/First";

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

  useEffect(() => {}, [focusDate]);

  return (
    <div>
      <First focusDate={focusDate} />
    </div>
  );
};

export default DateHandler();

Answer 1

我在第二个中使用了 useEffect 钩子，我的期望是每当 数据在第一个组件中重新渲染，它也应该是 第二次重新渲染。

对useEffect 的依赖是Second 组件的state(focusDate)，在组件内的任何地方都没有更改。所以，Second 不会重新渲染。

解决方案：

将state 和状态更新代码移至父组件，并将state 作为道具传递给First 和Second 组件。

组件应该是这样的：

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

  const onClick = () => {
    setFocusDate((prevDate) => prevDate - 504000000); //one week
    localStorage.setItem('focusDate', focusDate);
  };

  return (
    <div>
      <First focusDate={focusDate} onClickHandler={onClick} />
      <Second focusDate={focusDate} />
    </div>
  );
};

export default DateHandler();

---

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

const First = ({ focusDate, onClickHandler }) => {
  const month = new Date(focusDate).getMonth();
  const year = new Date(focusDate).getFullYear();

  return (
    <div>
      <i onClick={onClickHandler} className="fas fa-chevron-left"></i>
      <div className="data">{`${monthList[month]} ${year}`}</div>
    </div>
  );
};

---

const Second = ({ focusDate }) => {
  const month = new Date(focusDate).getMonth();
  const year = new Date(focusDate).getFullYear();

  return (
    <div>
      <div className="data">{`${monthList[month]} ${year}`}</div>
    </div>
  );
};

export default Second;