防止组件自定义钩子的无限重新渲染

Question

我在我的顶层页面/组件中调用了一个自定义数据获取钩子。

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来获取数据，但在这种情况下，我必须使用自定义钩子。

- ambe5960

---

@Viet 不好意思，只是一个打字错误而已！ - ambe5960

Answer 1

您需要在hook内使用useEffect，并清理副作用

export const useTeamList = () => {
  const [teamList, setTeamList] = useState<any[]>([]);
  const [isLoading, setLoading] = useState(true);

  React.useEffect(() => {
     const timeOut = setTimeout(() => {
      setActivityList(
        makeSequence((Math.random() * (3 - 0 + 1)) << 0).map(() => ({
          title: faker.lorem.words(3),
          description: faker.lorem.words(3),
          datetime: dayjs(),
        })),
      );
      setLoading(false);
    }, 1000);
    return () => { clearTimeout(timeOut) }
  }, [])
    

  return {
    teamList,
    isLoading,
  };
};

- iunfixit

---

太谢谢了！太好了。 - ambe5960