如何使用React函数组件与ES Map渲染指定格式的复杂JSON数据

实现思路 #

1. 格式化电影名称：将全大写的AVTAR转为首字母大写、其余小写的Avatar
2. 遍历角色分类：通过Object.entries()将displayData对象转为键值对数组，同时获取角色类型（actor/actress）和对应的演员列表
3. 嵌套遍历演员：对每个分类下的演员数组使用map()生成指定格式的文本行
4. 渲染到UI：用<p>标签包裹每行文本，确保独立显示

完整代码实现 #

import React from 'react';

const MovieCast = () => {
  const movie = "AVTAR";
  const displayData = {
    "actor": [{
      "id": 1,
      "name": "john"
    }, {
      "id": 2,
      "name": "peter"
    }],
    "actress": [{
      "id": 1,
      "name": "ema"
    }, {
      "id": 2,
      "name": "molly"
    }]
  };

  // 格式化电影名称：首字母大写，其余小写
  const formattedMovie = movie.charAt(0).toUpperCase() + movie.slice(1).toLowerCase();

  return (
    <div>
      {Object.entries(displayData).map(([role, actors]) => {
        return actors.map((actor) => (
          <p key={`${role}-${actor.id}`}>
            {`${formattedMovie} >> ${role} >> ${actor.name}`}
          </p>
        ));
      })}
    </div>
  );
};

export default MovieCast;

关键细节说明 #

• Object.entries(displayData)：将对象转换为[["actor", 演员数组], ["actress", 演员数组]]的结构，方便同时获取角色类型和演员列表
• 嵌套map()：外层遍历角色分类，内层遍历每个分类下的演员，生成符合要求的文本行
• key属性：使用${role}-${actor.id}作为唯一标识，避免React列表渲染警告，保证每个元素的唯一性
• 格式匹配：如果需要严格对应示例中actress后的双空格，可将模板字符串调整为${formattedMovie} >> ${role} >> ${actor.name}

内容的提问来源于stack exchange，提问作者sourabh k