Javascript 如何用setInterval构造useEffect

我错过了一些明显的东西，但看不见

updatelock（）

util运行并用日期/时间填充标记，但只运行一次

我知道我必须创建一个

useffect

并输入更改的状态变量，以便重新触发

useffect

，但在下面的代码中我将如何做到这一点？我是否将间隔设置在错误的位置？当

setInterval

运行时，什么状态变量应该每秒更改一次

import { updateClock } from '../../utils/updateClock';

interface LaDateTime {
  yr: string;
  mo: string;
  dt: string;
  hrs: string;
  min: string;
  sec: string;
  day: string;
}

export const Network: FunctionalComponent = () => {
  const { language: lang } = useContext(AppContext);
  const [pageContent, setpageContent] = useState<string | undefined>(undefined);
  const [laDate, setLaDate] = useState<LaDateTime | undefined>(undefined);

  /* *********************************************************************** */
  useEffect(() => {
    const currTime = updateClock();
    setLaDate({ yr: currTime[3], mo: currTime[1], dt: currTime[2], hrs: currTime[4], min: currTime[5], sec: currTime[6], day: currTime[0] });
    const interval = window.setInterval(updateClock, 1000);
    // Clear the interval if/when the component is removed from the DOM
    return () => window.clearInterval(interval);
  }, []);
  /* *********************************************************************** */


  return (
    <div class={style.networkDiv}>
      <div class={style.pageData}>
        {pageContent !== undefined && (
          <Typography>
            <div class={style.topStuff}>
              <div class={style.pageContent}>
                <Markup markup={pageContent} trim={false} type='html' />
              </div>
              <div class={style.clockDiv}>
                <div class={style.timedate}>
                  <a id='day'>{laDate?.day}</a>
                  <br />
                  <a id='mon'>{laDate?.mo}</a>
                  <a id='d'>{laDate?.dt}</a>,<a id='y'>{laDate?.yr}</a>
                  <br />
                  <a id='h'>{laDate?.hrs}</a> :<a id='m'>{laDate?.min}</a>:<a id='s'>{laDate?.sec}</a>
                </div>
              </div>
            </div>

从'../../utils/updatelock'导入{updatelock}；
接口时间{
yr：字符串；
莫：字符串；
dt：字符串；
hrs：字符串；
min：字符串；
第二节：字符串；
天：弦；
}
导出常量网络：FunctionalComponent=（）=>{
const{language:lang}=useContext（AppContext）；
常量[pageContent，setpageContent]=使用状态（未定义）；
const[laDate，setLaDate]=使用状态（未定义）；
/* *********************************************************************** */
useffect（（）=>{
const currTime=updatelock（）；
设定日期（{yr:currTime[3]，mo:currTime[1]，dt:currTime[2]，hr:currTime[4]，min:currTime[5]，sec:currTime[6]，day:currTime[0]}）；
const interval=window.setInterval（updatelock，1000）；
//从DOM中删除组件时清除间隔
return（）=>window.clearInterval（interval）；
}, []);
/* *********************************************************************** */
返回(
{pageContent！==未定义&&(
{laDate？.day}


{laDate？.mo}
{laDate？.dt}，{laDate？.yr}


{laDate？.hrs}:{laDate？.min}:{laDate？.sec}

您需要更新

setInterval

回调中的状态（调用

setLaDate

），这将触发组件的重新呈现

简单更改：

useEffect(() => {
  const currTime = updateClock();

  // This is only called one time when the component is mounted. The state
  // is not updated later on each clock update, so your component is not
  // re-rendering:
  setLaDate({
    yr: currTime[3],
    mo: currTime[1],
    dt: currTime[2],
    hrs: currTime[4],
    min: currTime[5],
    sec: currTime[6],
    day: currTime[0],
  });

  // ...despite updateClock being called every second:
  const interval = window.setInterval(updateClock, 1000);

  return () => window.clearInterval(interval);
}, []);

致：

此外，我可能会创建一个

useInterval

钩子，以便能够声明性地使用

setInterval

，如下所述：

useEffect(() => {
  function tick() {
    const currTime = updateClock();

    // Now you update the state every second as well, which triggers a re-render:
    setLaDate({
      yr: currTime[3],
      mo: currTime[1],
      dt: currTime[2],
      hrs: currTime[4],
      min: currTime[5],
      sec: currTime[6],
      day: currTime[0],
    });
  } 

  tick();

  const interval = window.setInterval(tick, 1000);

  return () => window.clearInterval(interval);
}, []);