Блог

Я использую useRef внутри разбитого на страницы списка.

Проблема в том, что на других страницах useRef ссылается на тот же элемент DOM, что и на первой странице (тот же индекс).

Как обойти эту проблему?

 <audio ref={playerRef} preload="metadata" playsInline={true}><source src={src} /></audio>
export default function Player({id, src}){
    const playerRef  = useRef([])
    playerRef.current = 

    const [duration,setDuration] = useState(0)
    const [progress,setProgress] = useState(0)
    const [canPlay,setCanPlay] = useState(false)
    const [playState,setPlayState] = useState(false)

    useEffect(()=>{
    try {
        playerRef.current.addEventListener('ended', ()=>setPlayState(false))
        playerRef.current.addEventListener('pause', ()=>setPlayState(false))
        playerRef.current.addEventListener('play', ()=>setPlayState(true))

        playerRef.current.addEventListener('durationchange', ({target:{duration}})=>{
            setDuration(duration)
        })
        playerRef.current.addEventListener('timeupdate', ({target:{currentTime}})=>{
            setProgress(currentTime)
        })
        playerRef.current.addEventListener('seeked', ({target:{currentTime}})=>{
            setProgress(currentTime)
        })
        // playerRef.current.load()
        // const { readyState, paused, ended, currentTime, duration } = playerRef.current
    } catch (error) {
        console.error(error)
    }
    },[playerRef])