Reactjs 使用React，通过state对象使用state映射，并创建音频元素数组。然后将音频持续时间保存为数组

我的状态中有以下数组：

tracks: [{
name: "Track A"
file: "https://urlto.mp3"
},
{
name: "Track B"
file: "https://urlto.mp3"
}
]

我正在尝试添加键/对值duration:X:XX，以便轨迹变为

其中，持续时间是从mp3文件的路径创建的。我想我几乎可以让它工作了，但我似乎无法将新数组添加到现有数组中。下面的代码给出了以下状态：

tracks: [{
name: "Track A"
file: "https://urlto.mp3"
},
{
name: "Track B"
file: "https://urlto.mp3"
},
"3:09",
"1:04"
]

提前感谢

试试这个：

函数生成音频曲目{ tracks.forEach{file}，i=>{ const audio=document.createElementaudio audio.src=文件 audio.addEventListenerloadedmetadata，=>{ 设定状态{ 状态 tracks:tracks.maptrack，i1=> i！==i1？轨迹：{…轨迹，持续时间：fmtMSSaudio.duration} } } } } 我最终使用了Object.assign，请参见下文

function makeAudio(tracks) {
    let audioArr = new Array()
    tracks.forEach(({ file }) => {
      console.log(file)
      const audio = document.createElement("audio")
      audio.src = file
      audio.addEventListener("loadedmetadata", function () {
        audioArr.push([audio.duration])
        console.log("makeAudio -> audioArr", audioArr)
        setState(state =>
          Object.assign(
            {},
            state,
            tracks.map((track, index) =>
              Object.assign(track, { duration: audioArr[index] })
            )
          )
        )
      })
    })
  }

---

谢谢，获取错误错误未定义错误“track”未定义未定义也看起来没有在任何地方使用{file}？修复了您的错误，只是将track.file更改为解构文件封装了它，非常感谢。干净多了。请解释一下你的方法，这里有一个伪代码：对于曲目中的曲目：使用src=track.file创建音频；加载元数据时：setState:state.tracks=//复制曲目数组，仅更新加载了持续时间的曲目[对于state.tracks中的oldTrack，如果indexOfoldTrack！=indexOftrack，则为track else{clone oldTrack with duration=audio.duration}]抱歉，刚刚检查它只通过了第一个对象consoleo.log 0:duration:1:45文件：name:Track C_id:65dc4748-9534-4b7d-86f7-e913394de0a5 proto:object 1:file:https:name:Track A_id:1e7ec9a9-f56b-4db4-8635-C6241208B0E

function makeAudio(tracks) {
    const ARR = new Array()
    for (let i = 0; i <= tracks.length; i++) {
      const au = document.createElement("audio")
      ARR.push(au)
    }
    console.log("makeAudio -> ARR", ARR)
    tracks.forEach((track, i) => {
      ARR[i].src = track.file
      ARR[i].addEventListener("loadedmetadata", function () {
        setState(state => ({
          ...state,
          tracks: state.tracks.concat(fmtMSS(ARR[i].duration)),
        }))
      })
    })
  }

function makeAudio(tracks) {
    let audioArr = new Array()
    tracks.forEach(({ file }) => {
      console.log(file)
      const audio = document.createElement("audio")
      audio.src = file
      audio.addEventListener("loadedmetadata", function () {
        audioArr.push([audio.duration])
        console.log("makeAudio -> audioArr", audioArr)
        setState(state =>
          Object.assign(
            {},
            state,
            tracks.map((track, index) =>
              Object.assign(track, { duration: audioArr[index] })
            )
          )
        )
      })
    })
  }