错误：React Hook useEffect 缺少依赖项。有没有人有办法解决吗？

Question

我已经创建了一个音乐播放器作为我正在处理的项目的一部分，但我有这个错误。有没有人有办法解决吗？

[eslint] src\components\MusicPlayer.jsx 第 48:9 行：React Hook useEffect 缺少依赖项：'togglePlay'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

我已经为这个例子缩短了代码。任何帮助，将不胜感激！

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


function MusicPlayer({songs}) {

      //Test 
const songFiles = songs.map(song => song.songFile)

    //Hooks
    const audioPlayer = useRef()

    //State
    const [index, setIndex] = useState(0);
    const { songClicked} = useContext(songContext)
    // setSongClicked
    const [currentSong, setCurrentSong] = useState(songClicked);
    const [isPlaying, setisPlaying] = useState(false);
    const [volume, setVolume] = useState(30);
    const [mute, setMute] = useState(false);


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

     }, [songClicked])
 

    useEffect(() => {
        if(audioPlayer) {
            audioPlayer.current.volume = volume / 100;
        }
    }, [volume]);


    function togglePlay() {
        if(!isPlaying) {
            audioPlayer.current.play()
        } else {
            audioPlayer.current.pause()
        }
        setisPlaying(isPlaying => !isPlaying)
    }

Answer 1

useEffect 缺少依赖项。有没有人有办法解决吗？

我想这个错误说明了一切。只需将togglePlay 包含在依赖useEffect 的数组。

useEffect(() => {
   if (currentSong !== songClicked) {
     setCurrentSong(songClicked)
   }
    
}, [songClicked, togglePlay]);
           //    ^^^^^^^^^

还要确保用useCallback 包裹你的togglePlay，保持渲染之间的函数引用。否则，你可能会得到一个无穷环形。

const togglePlay = useCallback(() => {
   ...
}, []);