La función que me gustaría implementar es que el componente React muestre la tarea que se llevaría a cabo de acuerdo con las marcas de tiempo de los datos que se encuentran en la matriz de datos.
Cada uno de los elementos de la matriz tiene dos marcas de tiempo, la marca de tiempo de cuándo se inicia la tarea y cuándo finaliza la tarea.
Sin embargo, desafortunadamente no sé cómo podría hacer que el componente muestre dinámicamente la tarea que se ejecutará.
Es decir, si hay una tarea por ejecutar, mostraría la tarea que se está iniciando, de lo contrario, no muestra la tarea y espera hasta que comience la siguiente tarea en el arreglo para poder mostrarla.
Espero no estar confundido 😬
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>} </> ) }¿Cómo podría implementar esto? 😅
Puede hacer esto usando setInterval o useInterval para verificar periódicamente los datos y actualizar el estado según la fecha y hora de inicio. Pongo el código useInterval de la biblioteca aquí para ver cómo usar setInterval correctamente en reaccionar:
usarIntervalo:
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]); }Componente de la aplicación:
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;