我无法在地图函数中使用引导模式

Question

第一个 iframe 可以工作。但第二个 iframe 位于引导模式中，没有获得我的 src 属性。在控制台中显示为空。

如果我输入 src="youtube.com/url" 而不是 src={musics.musicEmbed} 这也有效。但我想在我的地图函数中使用引导模式，我该怎么做？

{musicList.map((musics) => {
       return (
         <div className="games">
           <div className="inside-games">
             <div className="game1">
               <h2 id="game-title">{musics.musicTitle}</h2>
               <Iframe
                 url={musics.musicEmbed}
                 width="450px"
                 height="450px"
                 id="myId"
                 className="myClassname"
                 display="initial"
                 position="relative"
               />
               <img src={musics.musicImage} id="game" />
               <Button variant="warning" onClick={handleShow}>
                 Start Game
               </Button>
               <Modal
                 size="lg"
                 id="mods"
                 show={show}
                 onHide={() => setShow(false)}
                 aria-labelledby="example-modal-sizes-title-lg"
               >
                 <Modal.Body>
                   <Iframe
                     url={musics.musicEmbed}
                     width="450px"
                     height="450px"
                     id="myId"
                     className="myClassname"
                     display="initial"
                     position="relative"
                   />
                 </Modal.Body>
                 <Modal.Footer>
                   <Button variant="warning" onClick={handleClose}>
                     Close
                   </Button>
                 </Modal.Footer>
               </Modal>
             </div>
           </div>
         </div>
       );
     })}

Answer 1

我解决了创建另一个模态组件并将其传递给主地图组件的问题。 ^^

 {musicList.map((musics) => {
        return (
          <div className="games">
            <div className="inside-games">
              <div className="game1">
                <h2 id="game-title">{musics.musicTitle}</h2>
                <img src={musics.musicImage} id="game" />
                <MusicModal
                  musicImage={musics.musicImage}
                  musicTitle={musics.musicTitle}
                  musicEmbed={musics.musicEmbed}
                />
              </div>
            </div>
          </div>
        );
      })}

Answer 2

如果有人遇到同样的问题并修复它，请提供完整的代码。 我使用了之前的算法，但只渲染了第一个元素。