Estoy construyendo un componente para notificaciones. Se parece a esto:
const renderTime = eventTime => { let toDisplay = eventTime.toLocaleDateString(); if (isJustNow(eventTime)) { toDisplay = "Just now"; } else if (isToday(eventTime)) toDisplay = eventTime.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit" }); return <Text>{toDisplay}</Text>; }; export default function NotificationCard({ item }) { return ( <ListItem accessoryRight={() => renderTime(item.created)} /> ); }Esto es React Native, pero no debería importar.
Lo que quiero es que, si la notificación es de hace un minuto, se muestre Just now . Si es de hace más de un minuto para mostrar a tiempo completo. Está funcionando bien, pero se atascó Just now .
Mi pregunta es: ¿Cómo hago para que la función renderTime a evaluar el texto para mostrarlo después de un minuto?
Depende de cómo esté utilizando este componente. Si el componente es un componente tonto, debe ver el tiempo de utilería en el renderizado y establecer bases de tiempo locales de tiempo en eso. O puede crear un componente inteligente con setInterval para actualizar el tiempo. Consulte a continuación la versión preliminar del código.
// componente inteligente
const isJustNow = (time) => Date.now() - time < 5000; const isToday = (time) => Date.now() - time < 24 * 60 * 1000; const Timer = ({ time: currentTime }) => { const [time, setTime] = useState(currentTime); useEffect(() => { const id = setInterval(() => { setTime(new Date(time.getTime() - 1000)); }, 1000); return () => clearInterval(id); }, [currentTime, time]); let toDisplay = time.toLocaleDateString(); if (isJustNow(time)) { toDisplay = "Just now"; } else if (isToday(time)) toDisplay = time.toLocaleTimeString("en", { hour: "2-digit", minute: "2-digit" }); return <h2>{toDisplay}</h2>; }; export default function App() { const times = [new Date(), new Date(Date.now() - 2000)]; return ( <div className="App"> {times.map((time) => ( <Timer key={time} time={time} /> ))} </div> ); } Aquí, en el ejemplo anterior, está utilizando currentTime como la hora inicial cuando se monta. Una vez que el componente esté montado, ejecutará su propio programador para actualizar la hora en el estado local.
Código de trabajo:
(codesandbox)( https://codesandbox.io/embed/optimistic-leaf-y24nz?fontsize=14&hidenavigation=1&theme=dark )