在 JSX 中映射多个数组

在 JSX 中映射数组时，我试图以某种方式显示一些 html 元素。我希望它是这样的：

标题
链接

标题
链接

但是当我尝试时，我总是以这样的方式结束它：

标题
标题

链接
链接

这就是数组的结构。

在我的代码中，这就是我在数组上映射的方式。

{audioInfo.map((item, index) => {
                   
   return ( <div key={index}>

                        
     <div>{item.filename[0].name}</div>
                            
         {

          item.url.map((u,i)=>(
              <div key={i}>
                                
                 <audio controls src={u}> </audio>
              </div>
           ))
         }
  </div> )
 })}

这是我遇到问题的部分。

item.filename[0].name

这只会获取第一个文件名，但我不确定如何在仍然像我想要的那样渲染 html 的同时迭代到下一个文件名。在每次地图迭代中，它应该与filename和成对出现url。我希望这是有道理的。

完整代码：

import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import  firebaseConfig from "../dropzone/config";

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    BrowserRouter,
    useParams
  } from "react-router-dom";
import { isElement } from 'react-dom/test-utils';


if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);

}else {
    firebase.app(); // if already initialized, use that one
}

  // router is getting the current path name


const FolderPage = () => {

    let {folder} = useParams();

    let fb_storage = firebase.storage();
    let storageRef = fb_storage.ref();  
    
    let rootRef = storageRef.child(folder);


    const [files, setFiles] = useState([]); 
   
    const [audioInfo, setAudioInfo] = useState([]);    

        
    const fileNames =  () =>{
        let temp = [];
        rootRef.listAll().then( function(res) {
            
            let promises = res.items.map(item => item.getDownloadURL());

            Promise.all(promises).then((downloadURLs)=>{
                        
                  
                    setAudioInfo([
                        {
                            filename:res.items, 
                            url: downloadURLs 
                        }  
                    ])
                })
          
            }).catch(function(error) {
           
        });
            
    
    }

    useEffect(()=>{
        fileNames();
    },[])


    console.log(audioInfo)
    

    return (
        <>
            <div>hello {folder}</div>
          

            <div>

                
                {audioInfo.map((item, index) => {
                   
                   return ( <div key={index}>

       
                           <div>{item.filename[0].name}</div>
                            
                            {

                            item.url.map((u,i)=>(
                               <div key={i}>
                                <span>{u.name}</span>   
                                <audio controls src={u}> </audio>
                               </div>
                            ))
                            }

                           
                    </div> )
                    })}
                
            </div>

        </>
    )
}

export default FolderPage