Javascript 如何在React.js中映射到另一个映射中

使用React.js中的map函数从该json获取Mp3中的内容：

{
  "175": {
    "label": "Pub Radio",
    "icone": "",
    "Mp3": {
      "33278": {
        "id": 33278,
        "titre": "Ricardo Villalobos - Caminando",
        "intention1": "Doux",
        "intention2": "Doux",
        "intention3": "Doux",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  "176": {
    "label": "Pub Cd/Dvd",
    "icone": "",
    "Mp3": {
      "33277": {
        "id": 33277,
        "titre": "Mano lo taugh - Primative People",
        "intention1": "Chaleureux, rassurant",
        "intention2": "Joyeux",
        "intention3": "Souriant",
        "langue": "Allemand",
        "visibilite": 1
      },
      "33279": {
        "id": 33279,
        "titre": "Foals - Late Night (Solomun Remix).mp3",
        "intention1": "Amical, complice",
        "intention2": "Amical, complice",
        "intention3": "Amical, complice",
        "langue": "Allemand",
        "visibilite": 1
      }
    }
  },
  "245": {
    "label": "Billboard",
    "icone": "",
    "Mp3": {
      "33280": {
        "id": 33280,
        "titre": "Techno",
        "intention1": "Posé, calme",
        "intention2": "Amical, complice",
        "intention3": "Souriant",
        "langue": "Americain",
        "visibilite": 1
      }
    }
  }
}

这是我的地图功能：

  {Object.keys(extraitMP3).map((label, i) => (
    <li key={i}>
        <span >key: {i} Name: {extraitMP3[label]}</span>
            {Object.keys(extraitMP3[label]).map((Mp3, i) => (
        <li key={i}>
            <span >key: {i} Name: {extraitMP3[label][Mp3]}</span>

            {Object.keys(extraitMP3[label][Mp3]).map((idSon, i) => (
        <li key={i}>
            <span >key: {i} Name: {extraitMP3[label][Mp3][idSon]}</span>
            {console.log('Titre',extraitMP3[label][Mp3][idSon].titre)}
            {console.log('Intention 1',extraitMP3[label][Mp3][idSon].intention1)}
            {console.log('Intention 2',extraitMP3[label][Mp3][idSon].intention2)}
            {console.log('Intention 3',extraitMP3[label][Mp3][idSon].intention3)}
            {console.log('Langue',extraitMP3[label][Mp3][idSon].langue)}
            {console.log('Visibilite',extraitMP3[label][Mp3][idSon].visibilite)}
        </li>
    ))}
        </li>
    ))} 
        </li>
    ))}

{Object.keys（extraitMP3.map）（（标签，i）=>(

键：{i}名称：{extratmp3[label]}
{Object.keys（extraitMP3[label]）.map（（Mp3，i）=>(

键：{i}名称：{extratmp3[label][Mp3]}
{Object.keys（extraitMP3[label][Mp3]）.map（（idSon，i）=>(

键：{i}名称：{extraitMP3[label][Mp3][idSon]}
{console.log（'Titre'，extratitmp3[label][Mp3][idSon].Titre）}
{console.log（'Intention 1'，extratitmp3[label][Mp3][idSon].Intention 1}
{console.log（'Intention 2'，extratitmp3[label][Mp3][idSon].Intention 2}
{console.log（'Intention 3'，extratitmp3[label][Mp3][idSon].Intention 3}
{console.log（'Langue'，extratitmp3[label][Mp3][idSon].Langue）}
{console.log（'Visibilite'，extratitmp3[label][Mp3][idSon.Visibilite）}

))}

))} 

))}

结果按预期显示在控制台中，但我也收到许多未定义的其他结果。我认为这是一个与地图循环的问题，但我不知道我的问题到底在哪里：

这是我在控制台中找到的：

简短回答：

extraitMP3[label][Mp3]

应该是

extraitMP3[label].Mp3

（或者

extraitMP3[label]['Mp3']

，尽管大多数linter不推荐）

但有几件事是错的

• 你有重复的钥匙，这会影响你的表演。不要使用
  而是使用一个唯一的标识符，例如歌曲id（用于最后一个嵌套循环）
• 正如HRK44所指出的，应该在每个循环中使用唯一的迭代器
• 个人喜好，我会用它来避免将来出现这种问题。这样，您将永远不会在长串接字符串中迷失方向，并且调试将更容易

简短回答：

extraitMP3[label][Mp3]

应该是

extraitMP3[label].Mp3

（或者

extraitMP3[label]['Mp3']

，尽管大多数linter不推荐）

但有几件事是错的

• 你有重复的钥匙，这会影响你的表演。不要使用
  而是使用一个唯一的标识符，例如歌曲id（用于最后一个嵌套循环）
• 正如HRK44所指出的，应该在每个循环中使用唯一的迭代器
• 个人喜好，我会用它来避免将来出现这种问题。这样，您将永远不会在长串接字符串中迷失方向，并且调试将更容易

---

这可以简化为

{
   Object.keys(extraitMP3).map(ids => {
     return (
        <li key={ids}>
           <span >key: {ids} Name: {extraitMP3[ids].label}</span>
              {
                Object.keys(extraitMP3[ids].Mp3).map(idJson => {
                  return(
                    <li key={idJson}>
                      <span>key: {idJson} Name: {idJson}</span>
                      {console.log('Titre',extraitMP3[ids].Mp3[idJson].titre)}
                      {console.log('Intention1',extraitMP3[ids].Mp3[idJson].intention1)}
                      {console.log('Intention 2',extraitMP3[ids].Mp3[idJson].intention2)}
                      {console.log('Intention 3',extraitMP3[ids].Mp3[idJson].intention3)}
                      {console.log('Langue',extraitMP3[ids].Mp3[idJson].langue)}
                      {console.log('Visibilite',extraitMP3[ids].Mp3[idJson].visibilite)}
                   </li>
                  );
                 })
                }
              </li>
            );
          })
        }

{
Object.keys（extraitMP3.map）（id=>{
返回(

键：{ids}名称：{extraitMP3[ids].label}
{
Object.keys（extraitMP3[ids].Mp3）.map（idJson=>{
返回(

键：{idJson}名称：{idJson}
{console.log（'Titre'，extratitmp3[ids].Mp3[idJson].Titre）}
{console.log（'Intention1'，extratitmp3[ids].Mp3[idJson].Intention1}
{console.log（'Intention 2'，extratitmp3[ids].Mp3[idJson].Intention 2}
{console.log（'Intention 3'，extratitmp3[ids].Mp3[idJson].Intention 3}
{console.log（'Langue'，extratitmp3[ids].Mp3[idJson].Langue）}
{console.log（'Visibilite'，extraitMP3[ids].Mp3[idJson].Visibilite）}

);
})
}

);
})
}

使用索引作为键不是一个好方法

---

希望这有帮助
这可以简化为

{
   Object.keys(extraitMP3).map(ids => {
     return (
        <li key={ids}>
           <span >key: {ids} Name: {extraitMP3[ids].label}</span>
              {
                Object.keys(extraitMP3[ids].Mp3).map(idJson => {
                  return(
                    <li key={idJson}>
                      <span>key: {idJson} Name: {idJson}</span>
                      {console.log('Titre',extraitMP3[ids].Mp3[idJson].titre)}
                      {console.log('Intention1',extraitMP3[ids].Mp3[idJson].intention1)}
                      {console.log('Intention 2',extraitMP3[ids].Mp3[idJson].intention2)}
                      {console.log('Intention 3',extraitMP3[ids].Mp3[idJson].intention3)}
                      {console.log('Langue',extraitMP3[ids].Mp3[idJson].langue)}
                      {console.log('Visibilite',extraitMP3[ids].Mp3[idJson].visibilite)}
                   </li>
                  );
                 })
                }
              </li>
            );
          })
        }

{
Object.keys（extraitMP3.map）（id=>{
返回(

键：{ids}名称：{extraitMP3[ids].label}
{
Object.keys（extraitMP3[ids].Mp3）.map（idJson=>{
返回(

键：{idJson}名称：{idJson}
{console.log（'Titre'，extratitmp3[ids].Mp3[idJson].Titre）}
{console.log（'Intention1'，extratitmp3[ids].Mp3[idJson].Intention1}
{console.log（'Intention 2'，extratitmp3[ids].Mp3[idJson].Intention 2}
{console.log（'Intention 3'，extratitmp3[ids].Mp3[idJson].Intention 3}
{console.log（'Langue'，extratitmp3[ids].Mp3[idJson].Langue）}
{console.log（'Visibilite'，extraitMP3[ids].Mp3[idJson].Visibilite）}

);
})
}

);
})
}

使用索引作为键不是一个好方法

---

希望这有帮助
快速提示，避免在嵌套循环中使用相同名称的变量（

i

），这可能是您的问题…我将其更改为i、j和k，但什么也没有发生同样的问题

键：{i}名称：{extratmp3[label]}

这将输出一个对象，这是好的吗？你是什么意思？我不清楚我删除了它结果不会更改快速提示，避免在嵌套循环中使用同名变量（

I

）…这可能是你的问题…我将它更改为I、j和k，但什么也没发生同样的问题

键：{I}名称：{extratmp3[label]

这将输出一个对象，这样好吗？你是什么意思不清楚我删除了结果没有改变