嵌套映射不在 jsx 反应中显示数据

Question

我正在尝试将来自第三方的这种格式的数组中的数据映射到 jsx，但它似乎没有显示任何内容。这是我映射的数组。

[
[
    {
        "id": "file1",
        "link": "link.com",
        "type": "video",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "name": "Mod1 Some tandom titls"
    },
    {
        "id": "file2",
        "type": "video",
        "name": "Mod1 Title bla bla bla",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "link": "link.com"
    }
],
[
    {
        "id": "file1",
        "name": "Mod2 Another andom sajdf ",
        "type": "video",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ",
        "link": "link.com"
    },
    {
        "id": "file2",
        "name": "mod2 some random other title",
        "type": "video",
        "link": "link.com",
        "overview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
    }
]]

在这里我尝试用每个对象映射索引和每个对象的名称但是它returns在浏览器中什么都没有

modulesdata.map((module,index)=>{

                    <h1 key={index}>module{index}</h1>
                           {module.map((mod,i)=>{
                             <p>{mod.name}</p>
                           })}
                        }
                    )

Answer 1

你必须return这个值。

modulesdata.map((module,index)=> {
   return (
        <div key={index}>
          <h1>module{index}</h1>
          {module.map((mod,i)=> <p key={i}>{mod.name}</p> )}
        </div>
          )
   })

另外，不要忘记一次只 return 一个节点。在这里，您有一个 h1 和一个 p 没有任何包装根标签。

Answer 2

将数组视为 outerArray 变量或状态。如果在 map 函数中使用第一个括号“()”，则不需要使用 return 来渲染组件，如果使用大括号“{}”则必须 return里面的组件值。您必须将所有元素包装在地图函数内的单个元素中

在您的组件中使用此代码

      {outerArray.map((innerArray, index) => (
        <>
          <h4 key={index}>Inner Array Number: {index + 1}</h4>
          {innerArray.map((elm, innerIndex) => (
            <p key={innerIndex}>{elm.name}</p>
          ))}
        </>
      ))}

在此代码中，我使用了第一个括号“()”，它不需要 return。你和我的代码的区别在于大括号。希望它能奏效..!!

嵌套映射不在 jsx 反应中显示数据

nested mapping not displaying data in jsx react

javascript

arrays

mapping

javascript-objects

reactjs