试图让我们在数组中使用 React 的 useRef 来获取音频的持续时间

Posted 2023-02-25

【中文标题】试图让我们在数组中使用 React 的 useRef 来获取音频的持续时间

【英文标题】：Trying to us React's useRef in an array to grab an audio' duration

【发布时间】：2020-06-09 18:00:48

【问题描述】：

当我运行我的反应代码时，我目前收到一个错误Cannot read property 'addEventListener' of undefined。该代码旨在遍历包含音频文件的列表并获取音频持续时间。该应用程序正确呈现，但我在生命周期中做错了什么。我认为。代码如下

import React,  useRef, useEffect, useState  from "react"
import  Link  from "gatsby"

const Single = ( name, tracks ) => 
  const [duration, setDuration] = useState([])
  const audioRef = useRef([])

  function getTrackLength(track) 
    track.addEventListener("loadedmetadata", function () 
      setDuration(track.duration)
    )
  
  useEffect(() => 
    audioRef.current = new Array(tracks.length)
  , [])
  useEffect(() => 
    if (audioRef.current.length !== 0) 
      for (let i = 0; i <= audioRef.current.length; i++) 
        getTrackLength(audioRef.current[i])
      
    
  , [])
  return (
    <>
      <h2>name</h2>

      <ul>
        tracks.map((track, i) => (
          <li key=track._id>
            <div>
              <strong>track.name</strong>
              <audio
                ref=el => (audioRef.current[i] = el)
                src=track.file
                controls
              />
              <i>duration</i>
            </div>
          </li>
        ))
      </ul>
      <Link to="/singles">Back</Link>
    </>
  )


export default Single

在此先感谢

【参考方案1】：

您有一个额外的迭代，其中包含 undefined 和 track：

//               v not <=
for (let i = 0; i < audioRef.current.length; i++) 
  getTrackLength(audioRef.current[i]);

您的组件应该如下所示：

const Single = ( name, tracks ) => 
  const [duration, setDuration] = useState([]);
  const audioRef = useRef(new Array(Number(tracks.length));

  useEffect(() => 
    function getTrackLength(track) 
      track.addEventListener("loadedmetadata", function () 
        setDuration([...duration, track.duration]);
      );
    

    for (let i = 0; i < audioRef.current.length; i++) 
        getTrackLength(audioRef.current[i]);
    
  , []);

  return (
    <>
      <h2>name</h2>
      <ul>
        tracks.map((track, i) => (
          <li key=track._id>
            <div>
              <strong>track.name</strong>
              <audio
                ref=(el) => (audioRef.current[i] = el)
                src=track.file
                controls
              />
              <i>duration[i]</i>
            </div>
          </li>
        ))
      </ul>
      <Link to="/singles">Back</Link>
    </>
  );
;

export default Single;