reactjs - 即使我没有在 React 中单击“加载更多”，也要保持数据添加

Question

我尝试自己弄清楚并搜索 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>
  );
}

Answer 1

这看起来更像是关于 react-hooks/exhaustive-deps 的 eslint 警告。

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

react 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
}, []);