Tengo una tabla de datos donde hay una sección llamada Artículo , Hora y ValidTill , por ejemplo, uno de los artículos tiene una hora del 2 de abril de 2022 a las 3:08:01 p. m. y es válida hasta el 2 de abril de 2022 a las 3:09:26. pm así que después de que caduque validtill hice una llamada api en useEffect que ya lo estoy haciendo una vez que el componente se monta, pero también quiero que se ejecute cuando expire validTill entonces, ¿cómo se puede lograr?
const [quotesData, setQuotesData] = useState([]); useEffect(() => { getRandomdata(); }, []); async function getRandomdata() { const result = await RandomApi.get(`/quotes/${symbolId}`); setQuotesData(result.data.payload); } <Table stickyHeader className={classes.stickyHeader}> <TableHead> <TableRow> <TableCell>Item</TableCell> <TableCell>Time</TableCell> <TableCell>Validtill</TableCell> </TableRow> </TableHead> <TableBody> {quotesData.map(({Item, time, valid_till }) => ( <TableRow key={Item}> <TableCell>{Item}</TableCell> <TableCell> {moment(time).format("MMMM Do YYYY, h:mm:ss a")} </TableCell> <TableCell> {moment(valid_till).format("MMMM Do YYYY, h:mm:ss a")} </TableCell> </TableRow> ))} </TableBody> </Table>Como podría haber muchas filas en su tabla y le gustaría escuchar el evento de caducidad de cada fila para poder enviar una solicitud de API para cada fila específica, ¿verdad?
Para lograrlo, puede usar la función javascript setInterval para establecer el intervalo para cada segundo y en el cuerpo de la devolución de llamada setInterval puede verificar el vencimiento de cada fila de esta manera.
useEffect(() => { setInterval(() => { // loop on each row an compare time to current time for expiration check if expired send the api request quotesData.map(({ Item, time, valid_till }) => { if (valid_till > currentTime) { // expired //send api request } }); }, 1000); });esta podría ser una buena solución si su conjunto de datos no es demasiado grande. Para conjuntos de datos más grandes, tenemos que hacer algunos ajustes más en el código.
Utilicé otro enfoque, en lugar de ejecutar un sondeo de intervalo para cada elemento, lo que sería codicioso, creo que podría calcular el tiempo restante desde el momento en que se monta el componente hasta el tiempo de vencimiento y simplemente colocar un tiempo de espera con la diferencia entre esos dos fechas, hice un ejemplo aquí, mira si te puede ayudar: https://stackblitz.com/edit/react-t5jfab
Coloqué solo un elemento en la matriz, pero funciona con cualquier cantidad de elementos, ya que solo los recorre y coloca tiempos de espera.