为什么我的状态在 onClick 事件时会在悬停时不断更新？

Question

我在我的 useEffect 之外放置了一个 console.log 来检索一个 youtube url 并且看到每当我将鼠标悬停在父 div 中或悬停在父 div 之外时，它似乎正在检索一个 URL。这导致大量 Youtube API 调用被浪费，所以我想知道这是怎么回事？

它应该只是在单击反应图标时调用我的 handlePlay 函数，然后设置 selectedTrack 状态。我的意思是，这确实有效，但它也有悬而未决的问题。

这是我的代码：

    const [hovered, setHovered] = useState(false);
    const [selectedTrack, setSelectedTrack] = useState<{ artist: string, title: string } | null>(null)
    const [youtubeURL, setYoutubeURL] = useState<string>('')

    const handlePlay = (title: string, artist: string) => {
        setSelectedTrack({ title, artist });
        console.log('clicked')
      };

    useEffect(() => {

        const getSongURL = async () => {
            if (selectedTrack) 
            try {
                const encodedTitle = encodeURI(selectedTrack.title.toLowerCase());
                const encodedArtist = encodeURI(selectedTrack.artist.toLowerCase());
                const songURL = await axios.get(`http://localhost:8080/api/v1/songdata/req_song/${encodedTitle}%20${encodedArtist}`);
                setYoutubeURL(songURL?.data?.id)
            
                

            } catch (error) {
                console.log("Error finding album details:", error);
              }
        }

        getSongURL();

    }, [selectedTrack])

console.log(youtubeURL)


    return (
        <>
            <ul className='list-none m-0 py-0 px-[35px] relative'>
                <li className='box-border'>
                     <div className='flex justify-between items-center py-0 px-[15px]'>
                        {/* Inner details of block*/}
                            <div className={`group w-full flex justify-between box-border items-center rounded-lg hover:bg-[#4c426e] cursor-pointer self-stretch min-w-0 h-[50px] p-0 mb-2 relative`} 
                                onMouseEnter={() => setHovered(true)}
                                onMouseLeave={() => setHovered(false)}>
                                <div className={`w-full text-[12px] min-w-[35px] max-w-[35px] text-left ml-2 self-center shrink text-lg text-[#989898] relative`}>
                                    <div className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`}>
                                        <span style={{ opacity: hovered ? 0 : 100 }} className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`} >
                                            {number}
                                        </span>
                                        <span style={{ opacity: hovered ? 100 : 0 }} className={`absolute bottom-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`} >
                                            <FaPlay onClick={() => handlePlay(title, artist)}/>
                                        </span>
                                    </div>
                                </div>
                                </div>
                            </li>
                        </ul>           
        </>
    )
}

几乎感觉 onMouseEnter 和 Leave 命令在某种程度上影响了它，但 onClick 事件甚至不应该引用悬停，所以它如何不断调用我的 handlePlay 函数只是在悬停时？

Answer 1

您能否在 CodeSandbox 中提供您的代码？ 另外，我会将 getSongURL 方法放在 useEffect 挂钩之外。