1

我正在尝试将这种格式的数组中的数据从第三方映射到 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}>module{index}</h1>
                           {module.map((mod,i)=>{
                             <p>{mod.name}</p>
                           })}
                        }
                    )
4

2 回答 2

0

您必须返回该值。

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

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

于 2021-09-27T13:43:16.040 回答
0

将数组视为 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>
          ))}
        </>
      ))}

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

于 2021-09-27T14:01:44.937 回答