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 掛鈎，因此我的期望是，每當數據在第一個組件中重新渲染時，它也應該在第二個組件中重新渲染。 不過，這不會發生。 我在這里想念什么？

UPD：根據下面的建議，創建了一個父組件以將 focusDate 作為道具傳遞，但它返回未定義。

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 更新代碼移動到父組件，並將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;