单个API端点返回预定事件或实时事件的时间戳。因此,倒计时可以是事件的剩余时间或实时事件的结束时间。
如果它是一个预定的事件,API返回剩余时间,但如果事件已经开始,那么它是事件的end_time。
我所期望的是,如果它是一个预定事件,那么一旦剩余时间结束,那么状态应该更新为事件end_time倒计时。
我使用jotai
来维护状态。
原子.js
import { atom } from 'jotai';
export const startTimeAtom = atom('');
export const isEventActiveAtom = atom(false)
事件块.js
import { startTimeAtom, isEventActiveAtom } from '../../atoms';
const EventBlock = () => {
const [startTime, setStartTime] = useAtom(startTimeAtom);
const [isEventActive] = useAtom(isEventActiveAtom);
useEffect(() => {
// api feting data and updating state
// ...
setStartTime(toLocalDateTime(dataStartTime, dataTimeZone))
//...
}, [isEventActive]);
const handleStatus = ({completed}) => {}
return (
<div>
<Counter
id={id}
counterEndTime={startTime}
status={eventStatus}
handleStatus={handleStatus}
/>
);
}
export default EventBlock;
最后一部分是
计数器.js
import React from 'react';
import Countdown from "react-countdown";
import { useAtom } from 'jotai';
import { startTimeAtom, isAuctionActiveAtom } from "../../atoms";
const Counter = ({ id, counterEndTime, status, handleStatus }) => {
const [startTime] = useAtom(startTimeAtom);
const [isEventActive, setIsEventActive] = useAtom(isEventActiveAtom);
const Completionist = ({ id, status }) => {
return 'Event ended';
};
// Renderer callback with condition
const handleRenderer = ({ completed, formatted }) => {
if ( completed ) {
if ( status !== 'expired' || status !== 'live' ) {
setIsEventActive(true);
} else {
return <Completionist id={id} status={status} />;
}
} else {
return Object.keys(formatted).map((key) => (
<div key={`${key}`} className={`countDown bordered ${key}-box`}>
<span className={`num item ${key}`}>{formatted[key]}</span>
<span>{key}</span>
</div>
))
}
};
return (
<div className="EventCounterContainer">
<div className="EventCounterInner">
<Countdown
id="Event"
date={counterEndTime}
renderer={handleRenderer}
intervalDelay={0}
precision={0}
onComplete={(e)=>handleStatus(e)}
/>
</div>
</div>
);
};
export default Counter;
1条答案
按热度按时间fjaof16o1#
我建议使用
useState
钩子触发useEffect
,该钩子在剩余时间结束后更改,这样您将在事件开始后收到该事件在useEffect中,每次收到事件时检查是否已安排
我没有完全理解您的使用情形,但我希望您能理解