我在我的顶层页面/组件中调用了一个自定义数据获取钩子。
我的自定义钩子看起来像这样:
export const Teams: FC = (): JSX.Element => {
const { teamList, isLoading } = useTeamList();
return (
<Child
teams={teamList}
moreTeams={teamList}
/>
);
};
我的自定义钩子看起来像这样:
export const useTeamList = () => {
const [teamList, setTeamList] = useState<any[]>([]);
const [isLoading, setLoading] = useState(true);
setTimeout(() => {
setTeamList(
makeSequence((Math.random() * (3 - 0 + 1)) << 0).map(() => ({
title: faker.lorem.words(3),
description: faker.lorem.words(3),
datetime: dayjs(),
})),
);
setLoading(false);
}, 1000);
return {
teamList,
isLoading,
};
};
很不幸,这个钩子似乎被无限调用。我该如何阻止这种情况发生?我认为每次数据更新都会导致重新渲染,因此再次获取数据。通常我会使用useEffect来获取数据,但在这种情况下,我必须使用自定义钩子。