reactjs react-countdown未第二次重置或重新呈现

lmvvr0a8 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(136)

我正在尝试做的是在更改状态后更新重置倒计时。
我正在从API获取三种状态：future、live和expired
如果API返回带有时间戳的future，则该时间戳是拍卖的start_time，但是如果status是live，则该时间戳是拍卖的end_time。
因此，在以下代码中，我调用useEffect中的API以获取传递给倒计时的初始数据，它工作正常，但在handleRenderer中第一次完成时，我检查其状态并更新auctionStatus，同时useEffect检查更新以调用新时间戳的API ..到目前为止，它的工作和第二个时间戳显示，但它停止了...意味着第二次不倒计时。

import React, { useEffect } from 'react';
import { atom, useAtom } from 'jotai';
import { startTimeAtom, auctionStatusAtom } from '../../atoms';
import { toLocalDateTime } from '../../utility';
import Countdown from 'react-countdown';
import { getCurrentAuctionStatus } from '../../services/api';

async function getAuctionStatus() {
    let response = await getCurrentAuctionStatus(WpaReactUi.auction_id);
    return await response.payload();
}

const Counter = () => {
    // component states
    const [startTime, setStartTime] = useAtom(startTimeAtom);
    const [auctionStatus, setAuctionStatus] = useAtom(auctionStatusAtom);

    useEffect(() => {
        getAuctionStatus().then((response) => {
            setAuctionStatus(response.status);
            setStartTime(toLocalDateTime(response.end_time, WpaReactUi.time_zone));
        });
    }, [auctionStatus]);

    //
    const handleRenderer = ({ completed, formatted }) => {
        if (completed) {
            console.log("auction status now is:", auctionStatus);
            setTimeout(() => {
                if (auctionStatus === 'future') {
                    getAuctionStatus().then((response) => {
                        setAuctionStatus(response.status);
                    });
                }
            }, 2000)
        }

        return Object.keys(formatted).map((key) => {
            return (
                <div key={`${key}`} className={`countDown bordered ${key}-box`}>
                    <span className={`num item ${key}`}>{formatted[key]}</span>
                    <span>{key}</span>
                </div>
            );
        });
    };

    console.log('starttime now:', startTime);

    return (
        startTime && (
            <div className="bidAuctionCounterContainer">
                <div className="bidAuctionCounterInner">
                    <Countdown
                        key={auctionStatus}
                        autoStart={true}
                        id="bidAuctioncounter"
                        date={startTime}
                        intervalDelay={0}
                        precision={3}
                        renderer={handleRenderer}
                    />
                </div>
            </div>
        )
    );
};

export default Counter;

reactjs

来源：https://stackoverflow.com/questions/75063931/react-countdown-is-not-reseting-or-re-rendering-second-time

2条答案

按热度按时间

dluptydi1#

您使用auctionStatus作为useEffect的依赖项。当response.status相同时，auctionStatus不会更改，因此您的useEffect不会再次被调用。
对于回答你的意见如何解决这个问题..我不知道你的逻辑，但我会解释这个简单的例子.

export function App() {
  // set state to 'live' by default
  const [auctionStatus, setAuctionStatus] = React.useState("live") 
  React.useEffect(() => {
    console.log('hello')
    changeState()
  }, [auctionStatus])

  function changeState() {
    // This line won't result in calling your useEffect
    // setAuctionStatus("live") // 'hello' will be printed one time only.

    // You need to use a state value that won't be similar to the previous one. 
    setAuctionStatus("inactive") // useEffect will be called and 'hello' will be printed twice.
  }
}

您可以简单地使用一个标志来代替，它将不断地从true更改为false，如下所示：

const [flag, setFlag] = React.useState(true)

useEffect(() => {
  // ..
}, [flag])

// And in handleRenderer
getAuctionStatus().then((response) => {
  setFlag(!flag);
});

赞(0）回复(0）举报 2023-01-12

7cjasjjr2#

看一下下面的useCountdown钩子：
https://codepen.io/AdamMorsi/pen/eYMpxOQ

赞(0）回复(0）举报 2023-01-12