即使我没有在 React 中单击加载更多，也要继续添加数据答案

【问题标题】：Keep data adding even I do not click load more in React即使我没有在 React 中单击加载更多，也要继续添加数据
【发布时间】：2021-08-29 11:24:50
【问题描述】：

我尝试自己弄明白，搜索 StackOverflow，但我无法弄明白。

我解决了依赖性和另一个警告。

但是当我运行这段代码时，我的数据会自动添加下一页。

我认为这个问题是因为这段代码：

useEffect(() => {
        fetchingNextMovie();
      }, [fetchingNextMovie]); //if I make empty array, it is working fine. but I have an dependency warning.

我的代码是：

export default function Mainpage() {
  const [movies, setMovies] = useState([]);
  const [search, setSearch] = useState("");
  const [number, setNumber] = useState(1);
  const API = process.env.REACT_APP_API_KEY;
  const movie = `https://api.themoviedb.org/3/search/movie?api_key=${API}&language=en_US&page=${number}&query=${search}`;
  const popularMovie = `https://api.themoviedb.org/3/movie/popular?api_key=${API}&language=en-US&page=${number}`;

  const fetchdata = useCallback(async () => {
    let curURL = ``;
    if (search === "") {
      curURL = popularMovie;
    } else {
      curURL = movie;
    }
    const res = await axios.get(curURL);
    const data = res.data;
    return data;
  }, [movie, popularMovie, search]);

  const savedHeight = document.body.offsetHeight;

  const fetchingNextMovie = useCallback(() => {
    fetchdata().then((randomData) => {
      const newMovies = [...movies, ...randomData.results];
      setMovies(newMovies);
      window.scrollTo(0, savedHeight);
      // setTotalPage(randomData.total_pages);
      setNumber(randomData.page + 1);
    });
  }, [fetchdata, movies, savedHeight]);

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

  const onClick = () => {
    fetchingNextMovie();
  };

  return (
    <div>
      <Search setSearch={setSearch} />
      <MovieComponent movies={movies} />
      {/* <Paging setNumber={setNumber} totalPage={totalPage} /> */}
      <div className="loadButton" style={{ marginTop: "20px" }}>
        <button onClick={onClick}>Load More</button>
      </div>
    </div>
  );
}

【问题讨论】：

这是渲染循环，因为fetchingNextMovie 无条件更新movies，这是useCallback 挂钩中的一个依赖项。你确定这是一个依赖错误，还是只是一个关于缺少依赖的 eslint 警告？您什么时候实际上希望fetchingNextMovie 在useEffect 挂钩中运行？
对不起。这只是依赖警告。我可以忽略它吗？当我点击“加载更多”按钮时，我想要 fectingNextMovie

标签： reactjs react-hooks eslint use-effect

【解决方案1】：

这似乎更像是一个关于 react-hooks/exhaustive-deps 的 eslint 警告。

如果您绝对确定希望某些逻辑仅在组件挂载时运行，那么指定一个空的依赖数组 ([]) 相当于基于类的组件的componentDidMount生命周期方法。

反应useEffect

如果你想运行一个效果并只清理一次（在挂载和 unmount)，您可以传递一个空数组 ([]) 作为第二个参数。这告诉 React 你的效果不依赖于 props 的任何值或状态，因此它永远不需要重新运行。这不作为特殊处理 case — 它直接遵循依赖项数组的方式有效。

您可以忽略警告，或专门针对该行禁用 linting 规则。

例子：

useEffect(() => {
  // other component logic to run when component mounts

  ...

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

【讨论】：