React Hook useEffect依赖缺失报错原因及修复方案咨询

一、src\App.js 第118行报错修复 #

问题原因 #

useEffect 中调用了 getMoviesData 函数，但未将其添加到依赖数组中；同时 getMoviesData 每次组件渲染都会重新创建，直接添加会触发无限循环。另外原代码存在两处State声明错误：const [setKidsTv] = useState([]) 和 const [setTvShows] = useState([]) 缺少state变量名，会导致后续数据赋值失败。

修复步骤 #

1. 修正State声明错误：

   // 原错误代码
   const [setKidsTv] = useState([])
   const [setTvShows] = useState([])
   
   // 修改后
   const [kidsTv, setKidsTv] = useState([])
   const [tvShows, setTvShows] = useState([])
   

2. 使用 useCallback 包裹 getMoviesData，缓存函数引用避免重复创建：

   // 先导入useCallback
   import { useState, useEffect, useCallback } from 'react'
   
   // ...其他代码...
   
   // 用useCallback包裹异步函数
   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))
   }, [setMovies, setTopMovies, setTvShows, setKidsMovies, setKidsTv, setKidsTvSeries])
   

3. 更新 useEffect 的依赖数组，添加 getMoviesData 及所有用到的URL变量：

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

   （优化建议：可将所有URL常量移到组件外部，避免加入依赖数组）

二、src\components\MusicPlayer.jsx 第48行报错修复 #

问题原因 #

useEffect 中调用了 togglePlay 函数，但未将其添加到依赖数组中；togglePlay 每次组件渲染都会重新创建，直接添加会导致 useEffect 重复触发。

修复步骤 #

1. 使用 useCallback 包裹 togglePlay，缓存函数引用：

   // 先导入useCallback
   import { useState, useEffect, useRef, useCallback, useContext } from 'react'
   
   // ...其他代码...
   
   const togglePlay = useCallback(() => {
     if(!isPlaying) {
       audioPlayer.current.play()
     } else {
       audioPlayer.current.pause()
     }
     setisPlaying(isPlaying => !isPlaying)
   }, [audioPlayer, isPlaying])
   

2. 更新 useEffect 的依赖数组，添加 togglePlay：

   useEffect(() => {
     setCurrentSong(songClicked)
      if (songClicked) {
          audioPlayer.current.play()
      }
      if (songClicked) {
          togglePlay()
      }
   }, [songClicked, togglePlay])
   

   （额外提醒：原代码未导入 songContext，需补充 import { songContext } from '../path/to/your/context-file' 否则会报错）

内容的提问来源于stack exchange，提问作者Gavin-walsh