React中YouTube播放器组件状态更新不触发重渲染求助

核心问题 #

你的YouTube子组件在父组件playersAreReady状态变为true后没有重新渲染添加目标类，根源在于子组件重复重置就绪状态、useEffect依赖缺失以及父组件函数引用不稳定这三个问题。

具体问题点 #

1. 子组件重复初始化状态
   原代码中isPlayerReadyFunc(isPlayerReadyRef, false)直接写在组件函数体内，导致每次组件渲染（包括playersAreReady更新后的重新渲染）都会将ref重置为false，干扰父组件的就绪判断逻辑，甚至可能让子组件在状态更新后又“退回”未就绪状态。

2. useEffect依赖缺失
   创建YouTube播放器的useEffect依赖为空数组，没有包含id和isPlayerReadyFunc，会导致闭包问题，无法获取最新的props值。

3. 父组件函数引用不稳定
   addStateToReadySet函数每次父组件渲染都会重新创建，导致子组件的isPlayerReadyFunc props频繁变化，触发不必要的重新渲染，也可能引发闭包问题。

修复后的代码 #

子组件（YoutubePlayer.js）

'use client'
import { React, useEffect, useRef } from 'react'

const YoutubePlayer = ({ id, isPlayerReadyFunc, playersAreReady }) => {
    const isPlayerReadyRef = useRef()

    // 仅在组件挂载时初始化就绪状态
    useEffect(() => {
        isPlayerReadyFunc(isPlayerReadyRef, false)
    }, [isPlayerReadyFunc])

    useEffect(() => {
        const player = new window.YT.Player(`${id}`, {
            height: '390',
            width: '640',
            videoId: id,
            playerVars: {
                color: 'white',
                controls: 1,
                playsinline: 1,
                rel: 0,
            },
            events: {
                onReady,
                onStateChange,
            },
        })

        function onReady(event) {
            setTimeout(() => {
                isPlayerReadyFunc(isPlayerReadyRef, true)
            }, 1000)
            console.log('ready')
        }
        function onStateChange(event) {}
    }, [id, isPlayerReadyFunc]) // 添加必要依赖，避免闭包问题

    return (
        <div
            className={`youtube-div ${playersAreReady ? 'scale' : ''}`}
            id={`${id}`}
        ></div>
    )
}

export default YoutubePlayer

父组件（Home.js）

'use client'

import YoutubePlayer from '@/components/YoutubePlayer'
import { useState, useEffect, useRef, useCallback } from 'react'

export default function Home() {
    const YTPlayersAreReadySetRef = useRef(new Set())
    const [playersAreReady, setPlayersAreReady] = useState(false)
    const [tags, setTags] = useState()
    const [beats, setBeats] = useState([])

    useEffect(() => {
        const getBeats = async function (tags) {
            try {
                const res = await fetch(`http://localhost:3500/api/beats`)
                if (!res.ok) throw new Error("couldn't get beats from server ")
                const beats = await res.json()
                setBeats(beats)
            } catch (err) {
                throw err
            }
        }
        getBeats(tags)
    }, [tags])

    // 用useCallback稳定函数引用，避免不必要的子组件渲染
    const addStateToReadySet = useCallback((isReadyRef, boolean) => {
        isReadyRef.current = boolean
        YTPlayersAreReadySetRef.current.add(isReadyRef)
        const arrayFromSet = [...YTPlayersAreReadySetRef.current]

        if (arrayFromSet.every(i => i.current === true)) {
            setPlayersAreReady(true)
        }
    }, [])

    return (
        beats && (
            <div>
                <h1>videos</h1>
                {beats.map((beat) => (
                    <YoutubePlayer
                        playersAreReady={playersAreReady}
                        isPlayerReadyFunc={addStateToReadySet}
                        key={beat.YTid}
                        id={beat.YTid}
                    />
                ))}
            </div>
        )
    )
}

修复说明 #

1. 将子组件的状态初始化逻辑移到useEffect中，确保仅在组件挂载时执行一次，避免重复重置就绪状态。
2. 给创建播放器的useEffect添加id和isPlayerReadyFunc依赖，解决闭包问题。
3. 用useCallback包裹父组件的addStateToReadySet函数，稳定函数引用，减少不必要的子组件渲染。
4. 改用模板字符串拼接className，提升可读性，避免空格错误。

内容的提问来源于stack exchange，提问作者Ziv