如何在 Nextjs 中创建间隔 API 调用？

Question

const LoadingPage = ({merchantId, order}) => {

    const router = useRouter();

    useEffect(() => {
        if (order.status === "merchantAccepted") {
            router.push(`/${merchantId}/success`);
        }
    }, []);


    return (
        <Column>
            Waiting merchant to accept...
        </Column>
    );
};

export default LoadingPage;


export const getServerSideProps = async (ctx) => {
    const {params} = ctx;
    const {merchantId} = params;

    const merchant = await getMerchant(merchantId);
    const order = await getOrders("");

    return {
        props: {
            merchantId,
            merchant: merchant,
            order
        }
    };
};

我正在尝试做的是等待商家接受更改数据库中订单状态的订单。然后我想获取将用于将用户重定向到另一个页面的状态。目前我正在使用 getServerSideProps 但此方法只获取一次，我需要刷新页面。如何在不刷新页面的情况下进行 API 调用？

谢谢。

Answer 1

这里有几件事对你不利，但很容易解决！

第一个问题是你的影响。它只运行一次，而不是在订单状态更改时运行。通过添加对 order.status 的依赖来修复超级容易：

    useEffect(() => {
        if (order.status === "merchantAccepted") {
            router.push(`/${merchantId}/success`);
        }
    }, [order.status]);

现在，要获取更新的订单信息，我们需要进行一些更大的更改。您要做的第一件事是将order 的值缓存在状态中，这样您就可以允许组件调用API 并更新状态。第二件事是通过一种方式来更新订单状态。结合对效果挂钩的更改以及这些要求，我为您想出了这个：

const LoadingPage = ({ getOrders, merchantId, order: orderProp }) => {
    const router = useRouter();
    const [order, setOrder] = useState(orderProp);

    useEffect(() => {
        if (order.status === "merchantAccepted") {
            router.push(`/${merchantId}/success`);
        }
    }, [order.status]);

    useEffect(() => {
        // skip if merchant already accepted
        if (order.status === "merchantAccepted") return;

        // keep track of the timeout so we can cancel
        let timeout;

        // create an internal function to call the API to check for updates
        const checkApi = async () => {
            const updatedOrder = await getOrders("");
            setOrder(updatedOrder);

            if (updatedOrder.status !== "merchantAccepted") {
                // wait 2 seconds to call again
                timeout = setTimeout(checkApi, 2000);
            }
        }

        // make the initial check in 2 seconds
        timeout = setTimeout(checkApi, 2000);

        // on unmount, make sure we cancel
        return () => {
            clearTimeout(timeout);
        }
    }, []); // only execute this effect on mount

    return (
        <Column>
            Waiting merchant to accept...
        </Column>
    );
};

export default LoadingPage;

export const getServerSideProps = async (ctx) => {
    const {params} = ctx;
    const {merchantId} = params;

    const merchant = await getMerchant(merchantId);
    const order = await getOrders("");

    return {
        props: {
            merchantId,
            merchant: merchant,
            order,
            getOrders
        }
    };
};

我认为这将为您解决问题。如果您有任何问题，请告诉我！