React中渲染嵌套数据：map()的深度应用与最佳实践

{
    "id": "foo",
    "adSets": [
        {
            "id": "adset1",
            "name": "AdSet 1",
            "ads": [
                {
                    "id": "ad1",
                    "name": "Ad 1"
                }
            ]
        },
        {
            "id": "adset2",
            "name": "AdSet 2",
            "ads": [
                {
                    "id": "ad2",
                    "name": "Ad 2"
                },
                {
                    "id": "ad3",
                    "name": "Ad 3"
                }
            ]
        }
    ]
}

import React from 'react';

// 示例数据，实际应用中可能通过props或hook获取
const campaignData = {
    "id": "foo",
    "adSets": [
        {
            "id": "adset1",
            "name": "AdSet 1",
            "ads": [
                {
                    "id": "ad1",
                    "name": "Ad 1"
                }
            ]
        },
        {
            "id": "adset2",
            "name": "AdSet 2",
            "ads": [
                {
                    "id": "ad2",
                    "name": "Ad 2"
                },
                {
                    "id": "ad3",
                    "name": "Ad 3"
                }
            ]
        }
    ]
};

function CampaignDisplay({ data }) {
  // 确保data和其内部属性存在，以避免运行时错误
  if (!data || !data.adSets) {
    return <p>No campaign data available.</p>;
  }

  return (
    <div className="campaign-container">
      <h2>Campaign: {data.id}</h2>
      <ul className="adsets-list">
        {/* 外部map：遍历adSets数组 */}
        {data.adSets.length > 0 ? (
          data.adSets.map((adSet) => {
            // console.log("Current AdSet:", adSet.name); // 调试时可用于检查数据
            return (
              <li key={adSet.id} className="adset-item">
                <h3>{adSet.name}</h3>
                {/* 内部map：遍历adSet.ads数组 */}
                {adSet.ads && adSet.ads.length > 0 ? (
                  <ul className="ads-list">
                    {adSet.ads.map((ad) => (
                      <li key={ad.id} className="ad-item">
                        <span>{ad.name}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="no-ads-message">No ads in this ad set.</p>
                )}
              </li>
            );
          })
        ) : (
          <p className="no-adsets-message">No ad sets available for this campaign.</p>
        )}
      </ul>
    </div>
  );
}

// 假设在App组件中使用
// function App() {
//   return (
//     <div className="App">
//       <CampaignDisplay data={campaignData} />
//     </div>
//   );
// }
// export default App;

let obj = {
  "id": "foo",
  "adSets": [{
      "id": "adset1",
      "ads": [{
        "id": "ad1"
      }]
    },
    {
      "id": "adset2",
      "ads": [{
          "id": "ad2"
        },
        {
          "id": "ad3"
        }
      ]
    }
  ]
};

// 遍历对象的顶级属性
for (let key in obj) {
  // 检查属性值是否为数组
  if (Array.isArray(obj[key])) {
    // 如果是数组，使用map遍历其元素（例如adSet）
    obj[key].map((element) => {
      // 遍历adSet的属性
      for (let innerKey in element) {
        // 再次检查属性值是否为数组（例如ads）
        if (Array.isArray(element[innerKey])) {
          // 如果是数组，再次使用map遍历其元素（例如ad）
          element[innerKey].map((item) => {
            console.log("Nested item ID:", item.id); // 打印最内层元素的id
          });
        } else {
          console.log("Inner property:", innerKey, ":", element[innerKey]); // 打印adSet的其他属性
        }
      }
    });
  } else {
    console.log("Top-level property:", key, ":", obj[key]); // 打印顶级对象的其他属性
  }
}