我怎样才能在 React.js 中使用我的源代码和音频标签

Question

我正在尝试根据数据库中的一组数据动态地从文件夹中检索音频文件。但是，它仅在我手动导入文件名时有效，这不是我打算做的。我希望程序循环遍历我的数据数组并将文件名与数组中的字符串进行比较，以便我可以播放相应的音频文件。

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import api from '../../../Api'
import Carregando from '../../../components/Carregando'

const audioFilesContext = require.context(
  '../../../audios/listening-reading',
  true,
  /\.mp3$/
);

const ListeningReading = () => {
  const [play, setPlay] = useState()
  const [audioLoaded, setAudioLoaded] = useState(false);

  const location = useLocation()
  const conteudoAtual = {
    nivel: location.state.nivel,
    aula:  location.state.aula
  }

  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() =>{
    const fetchPost = async () =>{
      setLoading(true)
      await axios.post(`${api}/listening-reading`,{
        nivel: conteudoAtual.nivel,
        aula: conteudoAtual.aula,
      }).then((response) => { 
        console.log('response')
        setPosts(response.data)
      }).catch((rejected)=> { console.error(rejected.response.data)})
      setLoading(false)
    }
    fetchPost()
  },[conteudoAtual.nivel, conteudoAtual.aula])

  const audioPlay = () =>{
    posts.map((post) => {
      const path = audioFilesContext.keys().find((key) => key.replace('./', '') === post.audio)
      const audioFile = path ? `../../../audios/listening-reading/${path.replace('./', '')}` : null
 
      console.log('audioFile')
      console.log(audioFile)

      setPlay(audioFile)
    })
  }
  console.log('play')
  console.log(play)
  if(!play){
    console.log('play if')
    audioPlay()
  }

  const handleLoadedData = () => {
    console.log('function')
    setAudioLoaded(true);
  };

  return (
    <div className='container'>
      <h1>Listening Reading</h1>
      {
        posts.map((post) =>(
          <div key={post.id}>
            <h3>{post.titulo}</h3>
            <p className="fw-semibold">{post.texto}</p>
            {audioLoaded && (
              <audio controls>
                <source 
                  src={play}              
                  type={"audio/mp3"}
                />
                Your browser does not support the audio element.
              </audio>
            )}
            {!audioLoaded && <p>Loading audio...</p>}
            <audio
              src={play}
              onLoadedData={handleLoadedData}
              style={{ display: 'none' }}
            />
          </div>
        ))
      }
      {loading && <Carregando/>}
    </div>
  )
}

export default ListeningReading

我知道如果我手动导入我的音频，它会像这样工作：

import listenToAudio from '../../../audios/listening-reading/hello.mp3'

如果我也使用 require() 方法导入，它会起作用

const listenToAudio = require('../../../audios/listening-reading/hello.mp3')

<audio controls>
   <source 
     src={listenToAudio}              
     type={"audio/mp3"}
   />
   Your browser does not support the audio element.
  </audio>

现在，当我尝试动态执行此操作时，它不起作用，即使我在浏览器中检查我的元素时可以看到路径正确，我该怎么办？