最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

我不明白为什么我的 useEffect 函数在我的 NextJs 客户端中运行了两次

网站源码admin33浏览0评论

我不明白为什么我的 useEffect 函数在我的 NextJs 客户端中运行了两次

我不明白为什么我的 useEffect 函数在我的 NextJs 客户端中运行了两次

我有一个 NextJs 程序和一个在我的网站上使用的函数,叫做 useAsync。由于某种原因,这个函数每次被调用时都会运行两次。我认为这与调用 useAsyncInternal 的 useEffect 有关,但我不确定。

这是我的 useAsync.tsx:

import { useCallback, useEffect, useState } from "react";
import useUser from "./useUser";

export const useAsync = (func: Function, dependencies = [], requireAuth = true) => {
    const { execute, ...state } = useAsyncInternal(func, dependencies, true);
    const user = useUser();

    useEffect(() => {
        if (requireAuth) {
            if (user.id) execute();
        } else {
            execute();
        }
    }, [execute, user.id]);

    return state;
}

const useAsyncInternal = (func: Function, dependencies = [], initialLoading = false) => {
    const [loading, setLoading] = useState(initialLoading);
    const [error, setError] = useState<any>();
    const [data, setData] = useState<any>();

    const execute = useCallback((...params: any[]) => {
        setLoading(true);

        return func(...params).then((data: any) => {
            setData(data);
            setError(undefined);
            return data;
        }).catch((error: any) => {
            setData(undefined);
            setError(error);
            return Promise.reject(error);
        }).finally(() => {
            setLoading(false);
        });
    }, dependencies);

    return { loading, error, data, execute }
}

这里是调用 JSX 的 useAsync insde 的例子:

const { loading, error, data } = useAsync(myCommunities);

这里是 myCommunities 函数以防万一:

export const myCommunities = () => {
  return request.get("/communities/my");
};
回答如下:
发布评论

评论列表(0)

  1. 暂无评论