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作为props，但是它返回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;