ReactHookuseEffect缺少依賴項。如何修復此錯誤？-有解無憂

React Hook useEffect 缺少依賴項。

第 92:4 行：React Hook useEffect 缺少依賴項：'getMoviesData'。要么包含它，要么移除依賴陣列 react-hooks/exhaustive-deps

有人能告訴我如何解決這個錯誤嗎？我敢肯定這是非常簡單的事情，但任何幫助將不勝感激！

function App() {

// * MOVIE API *


//State 
const [movies, setMovies] = useState([])
const [topMovies, setTopMovies] = useState([])
const [kidsMovies, setKidsMovies] = useState([])
const [setKidsTv] = useState([])
//kidsTv
const [setTvShows] = useState([])
//TvShows
const [kidsTvSeries, setKidsTvSeries] = useState([])




//API URL 
const url = 'https://api.themoviedb.org/3/discover/movie?api_key=&with_genres=28/';
const tvUrl = 'https://api.themoviedb.org/3/tv/popular?api_key=8&language=en-US&page=1';
const kidsMovieURL = 'https://api.themoviedb.org/3/discover/movie?api_key=8&certification_country=US&certification.lte=G&with_genres=16&include_adult=false&sort_by=popularity.desc';
const kidsTvURL = 'https://api.themoviedb.org/3/tv/popular?api_key=8&language=en-US&page=1&with_genres=16&include_adult=false&sort_by=popularity.desc';
const topPicks = 'https://api.themoviedb.org/3/movie/top_rated?api_key=&language=en-US&page=1';
const kidsSeries = 'https://api.themoviedb.org/3/discover/tv?api_key=1f7c961ae4f02a23e0968d449c15bc98&with_genres=10762'

//Async function to fetch API
async function getMoviesData (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) {

  await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
  await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
  await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
  await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
  await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
  await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
}



//Use Effect 
 useEffect(() => { 
  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);

}, [])


  return (

    <div className='app'>

      <div className="header">
        <Header Home={Home} Movies={Movies} Kids={Kids} Music={lazyMusic} movies={movies} topMovies={topMovies} kidsMovies={kidsMovies} kidsTvSeries={kidsTvSeries} />
      </div>

      <div className="music-player">
        <MusicPlayer />
      </div>
  

    </div>
  )
}

export default App

uj5u.com熱心網友回復：

使用時useEffect，要記住的一件事是，在組件內部定義并在函式內部使用的任何狀態變數或函式effect（傳遞給的第一個引數useEffect）都應該包含在依賴陣列（第二個引數）中。

在您的組件中，您正在使用鉤子getMoviesData內的函式useEffect，但您尚未將其包含在依賴項陣列中。這就是您收到 linter 警告的原因。要解決這個問題，您只需在依賴陣列中添加函式。所以你的useEffect鉤子會變成這樣：

useEffect(() => { 
  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
}, [getMoviesData])

但是，這會產生一個問題——這意味著無論何時getMoviesData重新創建函式，效果都會再次運行。由于這個函式正在更新狀態，它會導致組件重新渲染，這會導致這個函式被重新創建，這反過來又會導致效果再次運行，創建一個無限回圈。

為了解決這個問題，您有幾個選擇：

移動getMoviesData里面useEffect的effect函式（如果你沒有在useEffect鉤子外面使用它）
將其移出組件（如果您不與狀態或任何其他組件方法互動）
將其包裝起來useCallback以記住函式參考（如果您在之外使用函式useEffect）

在您的情況下，您需要選項＃1。

useEffect(() => {
  function getMoviesData (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) {
    fetch(url).then(res => res.json()).then(data => setMovies(data.results))
    fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
    fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
    fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
    fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
    fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
  }

  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
}, [setMovies, setTopMovies, setKidsMovies, setKidsTv, setKidsTvSeries])

uj5u.com熱心網友回復：

Mayve 你可以嘗試類似的方法（使用 useCallback）：

const getMoviesData = useCallback(() => { /* your code */ }, []);

uj5u.com熱心網友回復：

你只需要記住函式useCallback并添加getMoviesData到useEffect.

  const getMoviesData = useCallback(async () => {
    await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
    await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
    await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
    await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
    await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
    await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
    }, [])

    useEffect(() => { 
      getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
    
    }, [getMoviesData])

uj5u.com熱心網友回復：

你應該像這樣進入getMoviesData func內部callback of useEffect：

//Use Effect 
 useEffect(() => { 
  //Async function to fetch API
  async function getMoviesData (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) {
    await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
    await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
    await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
    await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
    await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
    await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
  }
  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);

}, [])

或者另一種方式，你可以放在getMoviesData func外面useEffect，但你需要useCallback像getMoviesData這樣添加：

    const getMoviesData = useCallback(async (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) => {
      await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
      await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
      await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
      await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
      await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
      await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
    
    useEffect(() => { 
      getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
    }, [getMoviesData])

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529667.html

標籤：反应

上一篇：ReactNativeuseState不更新狀態

下一篇：在React中宣告函陣列件的問題