单个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;