React Hook useEffect依赖缺失报错 求修复方案（附代码示例）

一、App.js 第118行依赖缺失问题修复 #

问题原因 #

useEffect 依赖数组中缺少 getMoviesData，但直接将其加入数组会因函数每次渲染重新创建导致无限循环。

修复方案：使用 useCallback 稳定函数引用 #

1. 导入 useCallback：

import React, { useState, useEffect, useCallback } from 'react'

2. 用 useCallback 包裹 getMoviesData，声明依赖为所有用到的state setter（React保证这些setter引用稳定）：

// Async function to fetch API
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. 将 getMoviesData 和所有传入的URL常量加入 useEffect 依赖数组（URL为常量，不会触发重复渲染）：

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

替代方案：将函数移至 useEffect 内部 #

如果不想用 useCallback，可以直接把 getMoviesData 写进 useEffect，彻底避免依赖问题：

// Use Effect 
useEffect(() => { 
  async function getMoviesData() {
    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 函数）

二、MusicPlayer.jsx 第48行依赖缺失问题修复 #

问题原因 #

useEffect 中调用了 togglePlay 但未将其加入依赖数组，直接加入会因函数每次渲染重建导致无限循环。

修复方案：使用 useCallback 稳定 togglePlay 引用 #

1. 导入 useCallback：

import React, { useState, useEffect, useRef, useCallback } from 'react'

2. 用 useCallback 包裹 togglePlay，声明依赖为 isPlaying（函数内部用到的状态），同时增加空引用安全判断：

const togglePlay = useCallback(() => {
  if(!audioPlayer.current) return
  if(!isPlaying) {
    audioPlayer.current.play()
  } else {
    audioPlayer.current.pause()
  }
  setisPlaying(prev => !prev)
}, [isPlaying])

3. 将 togglePlay 加入对应的 useEffect 依赖数组，合并重复判断并增加安全校验：

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

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