添加依赖后无限循环答案

【问题标题】：Infinite loop after adding a dependency添加依赖后无限循环
【发布时间】：2021-05-04 13:25:53
【问题描述】：

当我添加依赖项fetchData 时，我的应用程序变成了一个无限循环。我做错了什么？

React Hook useEffect 缺少一个依赖项：'fetchData'。要么包含它，要么移除依赖数组

const [films, setFilms] = useState([]);
const [page, setPage] = useState(1);
const [isLoad, setIsLoad] = useState(false);

const incrementPage = () => {
  setPage(page + 1);
};

const fetchData = async () => {
  setIsLoad(true);
  const response = await fetch(
    `${baseURL}movie/popular?api_key=${API_KEY}&language=en-US&page=${page}`
  ).then((res) => res.json());
  setFilms([...films, ...response.results]);
  setIsLoad(false);
  incrementPage();
};

useEffect(() => {
  fetchData();
}, []);

【问题讨论】：

尝试用useCallback 钩子包裹fetchData
@FLash 谢谢你，伙计。我会试试的

标签： reactjs dependencies

【解决方案1】：

我会将 fetchData 的内容放入 useEffect 中。

const [films, setFilms] = useState([]);
const [page, setPage] = useState(1);
const [isLoad, setIsLoad] = useState(false);

const incrementPage = () => {
    setPage(page + 1);
};

useEffect(() => {
    setIsLoad(true);
    const response = await fetch(
        `${baseURL}movie/popular?api_key=${API_KEY}&language=en-US&page=${page}`
    ).then((res) => res.json());
    setFilms([...films, ...response.results]);
    setIsLoad(false);
    incrementPage();
}, [setIsLoad, page, setFilms, setIsLoad, incrementPage]);

如果'page'发生变化，它会自动获取新数据。

【讨论】：

我需要在按钮 Loop continue( 上使用 FetchData