Блог

Я пытаюсь вернуть значение функции компоненту в reactjs. Консоль.журнал внутри функции отображается, но результат не возвращается. У меня каждый раз возникают проблемы с этим сценарием. Может ли кто-нибудь, пожалуйста, помочь мне.

Ниже приведен мой код. Я не могу отобразить тег формы сигнала, который должен быть возвращен из функции encodedAudioFilename()

 const PopUpModal = props => {
   .....

   some code
   .....

function encodedAudioFilename(){
    const regex = /(?<=recordings/). /gm;
    let m;

    while ((m = regex.exec(audioLocation)) !== null) {
     
        // This is necessary to avoid infinite loops with zero-width matches
        if (m.index === regex.lastIndex) {
            regex.lastIndex  ;
        }
        // The result can be accessed through the `m`-variable.
        m.forEach((match, groupIndex) => {
            console.log("https://d30pkmxa7non58.cloudfront.net/" encodeURIComponent(match));
            
            return <Waveform src={"https://d30pkmxa7non58.cloudfront.net/" encodeURIComponent(match) }/>
        });
    }
  }

return (
 <ModalBody>
          <div className="wave-player">
          {encodedAudioFilename()}
        </div>
</ModalBody>
)
 
};
export default PopUpModal;
  

Ваша функция на самом деле ничего не возвращает

Попробуйте приведенный ниже код

 function encodedAudioFilename(){
    const regex = /(?<=recordings/). /gm;
    let m;

    let ar = [];
    while ((m = regex.exec(audioLocation)) !== null) {
     
        // This is necessary to avoid infinite loops with zero-width matches
        if (m.index === regex.lastIndex) {
            regex.lastIndex  ;
        }
        // The result can be accessed through the `m`-variable.
        arr = m.map((match, groupIndex) => {
            console.log("https://d30pkmxa7non58.cloudfront.net/" encodeURIComponent(match));
            
            return <Waveform key={groupIndex} src={"https://d30pkmxa7non58.cloudfront.net/" encodeURIComponent(match) }/>
        });
        arr = [...ar, ...arr];
    }
    return ar;
  }