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

Posted 2023-02-22

【中文标题】嵌套映射未在jsx反应中显示数据

【英文标题】：nested mapping not displaying data in jsx react

【发布时间】：2021-11-19 16:01:08

【问题描述】：

我正在尝试将来自第三方的这种格式的数组中的数据映射到 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. "
    
]]

在这里我尝试用每个对象和每个对象的名称映射索引，但它在浏览器中没有返回任何内容

modulesdata.map((module,index)=>

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

【参考方案1】：

你必须返回值。

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

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

【讨论】：

我试过你的 sn-p 但它会出现并消失一秒钟有什么办法吗？

代码是正确的（除了我忘记在p标签中添加密钥，请在上面找到更新版本）。如果出现“闪烁”效果，则可能来自组件/应用程序中其他地方的渲染问题。

【参考方案2】：

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

在您的组件中使用此代码

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

在这段代码中，我使用了第一个括号“()”，它不需要返回。您和我的代码的区别在于大括号。 希望它会工作..!!