时间戳

首页 > 解决方案 > React：更新第一个功能组件时渲染第二个功能组件

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

问题描述

我是功能组件的新手，并且很难弄清楚如何根据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();

标签： javascriptreactjs

解决方案

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

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

解决方案：

将stateand 状态更新代码移动到父组件，并将stateas props 传递给FirstandSecond组件。

这是组件的外观：

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;

推荐阅读