反应-useEffect和分页问题

问题描述

我已经开始使用React做一些事情，并且正在通过搜索制作电影应用程序，并且在找到的一些教程的帮助下应用了无限滚动分页。 基本上，我的问题是，当网站加载时，我使用useEffect（）钩来获取电影列表（使用FEATURED_API），但是由于存在相同的useEffect（）进行分页，因此我遇到了冲突，因此当我搜索电影（使用SEARCH_API）时，当我向下滚动时，它也会执行对FEATURED_API的调用。 有人可以建议我任何可能的解决方案吗？预先感谢。

import React,{useEffect,useState,useRef,useCallback} from 'react';
import Movie from './components/Movie'
import './App.css';

const FEATURED_API = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=(insert some api key here)&page=';
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=(insert some api key here)&query=';

function App() {
  const [movies,setMovies] = useState([]);
  const [searchTerm,setSearchTerm] = useState('');
  const [page,setPage] = useState(1);
  const [hasMore,setHasMore] = useState(false);

  const observer = useRef();
  const lastMovieRef = useCallback(node => {
    if (observer.current) observer.current.disconnect();
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        setPage(prevPage => prevPage + 1);
      }
    })
    if (node) observer.current.observe(node);
  },[hasMore]);

  useEffect(() => {
    getMovies(FEATURED_API + page);
  },[page]);

  const getMovies = (API) => {
    fetch(API)
    .then((res) => res.json())
    .then((data) => {
      console.log(data);
      setMovies(prevMovies => {
        return [...new Set([...prevMovies,...data.results])]
      })
      setHasMore(data.results.length > 0)
    });
  }

  const handleOnSubmit = (e) => {
    e.preventDefault();

    if (searchTerm) {
      setMovies([]);
      setPage(1);
      getMovies(SEARCH_API + searchTerm);
      setSearchTerm('');
    }
  }

  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  }

  return (
    <div className="App">
      <header className="header__wrapper">
        <form onSubmit={handleOnSubmit}>
          <input className="search" type="text" value={searchTerm} onChange={handleInputChange} placeholder="Search..." />
        </form>
      </header>
      <section className="movies__wrapper">
        {
          movies.length > 0 &&
          movies.map((movie,index) => {
            if (movies.length === index + 1) {
              return <Movie ref={lastMovieRef} movie={movie} key={movie.id} />
            } else {
              return <Movie movie={movie} key={movie.id} />
            }
          })
        }
      </section>
    </div>
  );
}

export default App;

解决方法

这是一个基本的解决方案。 您可以设置一个名为loading的新状态，并且只有在load状态为true时才能调用FEATURE_API。调用API后，可以将其设置为false。因此，在分页期间将不再调用它。

let [loading,setLoading] = useState(true)
useEffect(() => {
    if(loading === true) {
        getMovies(FEATURED_API + page);
        setLoading(false);
    }
  },[page]);