保持数据添加，即使我不点击在 React 中加载更多

Question

我自己想办法，在Whosebug上搜索了一下，还是想不通。

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

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

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

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>
  );
}

Answer 1

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

如果您绝对确定您想要一些逻辑运行仅当组件安装时，然后指定一个空依赖数组 ([]) 等同于基于 class 的组件的 componentDidMount 生命周期方法。

反应 useEffect

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

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

示例：

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

  ...

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

保持数据添加，即使我不点击在 React 中加载更多

Keep data adding even I do not click load more in React

reactjs

eslint

react-hooks

use-effect