时间戳

首页 > 解决方案 > 避免使用带有 useEffect 的 react 组件使用 let 和 mutating 值

reactjs - 避免使用带有 useEffect 的 react 组件使用 let 和 mutating 值

问题描述

问题。根据我得到的最新信息，我被认为是：

避免在 react 组件中使用 let 和 mutating 值，因为 React Hook useEffect 内部的变量在每次渲染后都会丢失。

所以假设我们有这样一个简单的例子：

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

import "./Timer.scss";

interface ITimerProps {
  setValid: (valid: boolean) => void;
}

export const Timer = ({ setValid }: ITimerProps) => {
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);
  const tokenTTL = 1;
  const endTime = new Date();
  let min = tokenTTL;
  let sec = 0;

  useEffect(() => {
    const interval = setInterval(() => {
      endTime.setMinutes(endTime.getMinutes() + tokenTTL);

      sec--;
      if (sec === -1) {
        sec = 59;
        min--;
      }

      setMinutes(min);
      setSeconds(sec);

      if (min === 0 && sec === 0) {
        clearInterval(interval);
        setValid(false);
      }
    }, 1000);
  }, []);

  return (
    <>
      <p className="Timer">
        <span className="minutes">{minutes}</span>
        <span className="divider">:</span>
        <span className="seconds">{seconds}</span>
      </p>
    </>
  );
};

在这里，我使用 let 秒和分钟。基于此，我只是在渲染一个简单的计时器，我必须使用 let 来改变我的值

标签： reactjsreact-hooks

解决方案

这可能不是他们所说的那种用例，因为您只调用useEffect()一次，其他所有操作都在一个setInterval().

话虽如此，您可以通过将可变变量移动到useEffect().

为 React 提供一种在卸载组件时通过返回清理函数来清除间隔的方法也是一个好主意。

推荐阅读