我不明白为什么我的 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");
};
回答如下:
更多推荐
我不明白为什么我的 useEffect 函数在我的 NextJs 客户端中运行了两次
发布评论