React，根据时间戳显示数组元素答案

【问题标题】：React, show array element according to timestampReact，根据时间戳显示数组元素
【发布时间】：2021-12-30 14:53:41
【问题描述】：

我想实现的功能是 React 组件根据数据数组中数据的时间戳显示将要发生的任务。

数组的每个元素都有两个时间戳，任务开始时间和任务结束时间的时间戳。

但是，不幸的是，我不知道如何使组件动态显示将要执行的任务。

即如果有任务要执行，则显示正在启动的任务，否则不显示该任务，等到数组中的下一个任务启动后才能显示.

我希望我没有感到困惑？？？？

import React, { useEffect, useState } from 'react'

const data = [
  {
    id: 1,
    title: "Read book"
    start: "2021-12-30T14:41:39+0000",
    end: "2021-12-30T15:41:39+0000"
  },
  {
    id: 2,
    title: "Clean desk"
    start: "2021-12-30T17:01:39+0000",
    end: "2021-12-30T17:24:39+0000"
  }
]

const App = () => {
  const [currentTask, setCurrentTask] = useState(undefined)
  
  useEffect(() => {
    setCurrentTask(getCurrentTask())
  }, [currentTask])

  const getCurrentTask = () => {
    return data ? data.find((task) => new Date(data.start).getTime() <= Date.now()) : undefined
  }

  return (
    <>
     {currentTask ? <div>{currentTask.title}</div> : <div>No current task</div>}
    </>
  )
}

我该如何实现呢？ ????

【问题讨论】：

您想实时检查任务日期以自动更新组件吗？
是的！很抱歉无法正确表达自己
您的数据是来自实时服务器还是页面加载后，您必须决定要显示什么任务？
它通过http请求来自api
是的，请！这将是一个可能的解决方案

标签： javascript reactjs react-native

【解决方案1】：

您可以通过使用setInterval 或useInterval 来定期检查数据并根据开始日期时间更新状态，我将库中的useInterval 代码放在这里看看如何在react 中正确使用setInterval：

使用间隔：

import React, { useEffect, useRef, useLayoutEffect } from "react";

export function useInterval(callback, delay) {
  const savedCallback = useRef(callback);

  useLayoutEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    if (!delay && delay !== 0) {
      return;
    }

    const id = setInterval(() => savedCallback.current(), delay);

    return () => clearInterval(id);
  }, [delay]);
}

应用组件：

import React, {useState} from "react";
import useInterval from "./useInterval";

const data = [
  {
    id: 1,
    title: "Read book",
    start: "2021-12-30T19:33:20",
    end: "2021-12-30T19:20:20",
  },
  {
    id: 2,
    title: "Clean desk",
    start: "2021-12-30T19:31:39",
    end: "2021-12-30T19:25:39",
  },
];

const App = () => {
  const [currentTask, setCurrentTask] = useState(undefined);
  useInterval(
    () => {
      const currentTask = getCurrentTask();
      setCurrentTask(currentTask);
    },
    // Delay in milliseconds or null to stop it
    60000
  );

  const getCurrentTask = () => {
    return data
      ? data.find((task) => {
          const startTime = new Date(task.start).getTime();
          const endTime = new Date(task.end).getTime();
          const now = Date.now();

          return startTime <= now && endTime >= now;
        })
      : undefined;
  };

  return (
    <>
      {currentTask ? (
        <div>{currentTask.title}</div>
      ) : (
        <div>No current task</div>
      )}
    </>
  );
};

export default App;

【讨论】：