React组件switch语句未返回JSX 社交图标div无内容渲染问题

social()函数本身没有返回任何值，因此JSX中调用该函数时拿到的是undefined，React不会渲染任何内容。
具体问题点：

• 函数内部仅执行了props.social.map()遍历逻辑，但没有用return将map生成的节点数组返回，遍历结果只存在于if作用域内
• 当props.social为空时，函数没有默认返回值，同样会返回undefined
• 原代码中遍历生成的<a>标签缺少列表渲染必须的key属性，会触发React渲染警告
• 代码中残留了测试文本jvgvvuv和debugger断点，会影响生产环境运行

const ProfileInfo = (props) => {
  const social = () => {
    // 非数组场景直接返回null，避免调用map报错
    if (!Array.isArray(props.social)) return null;
    // 返回map遍历生成的JSX节点数组
    return props.social.map((soc) => {
      switch (soc.network) {
        case "youtube":
          return (
            <a key={soc.link || 'youtube'} href={soc.link}>
              <Youtube />
            </a>
          );
        case "instagram":
          return (
            <a key={soc.link || 'instagram'} href={soc.link}>
              <Instagram />
            </a>
          );
        case "facebook":
          return (
            <a key={soc.link || 'facebook'} href={soc.link}>
              <Facebook />
            </a>
          );
        case "twitter":
          return (
            <a key={soc.link || 'twitter'} href={soc.link}>
              <Twitter />
            </a>
          );
        default:
          return null;
      }
    });
  };
  return (
      <div className="status">
        <p>{props.aboutMe}</p>
        <div className={s.user_links}>{social()}</div>
        <div className={s.friends_block}>
          <h5>Friends:</h5>
          <div className={s.my_friends}></div>
        </div>
      </div>
  );
};

• 列表渲染时给每个遍历生成的根节点添加唯一key属性，如果社交链接数据有唯一id，优先用id作为key值，比索引/链接更稳定
• 校验数组类型建议用Array.isArray()代替简单的非空判断，避免传入非数组值时调用map抛出类型错误

内容的提问来源于stack exchange，提问作者greg boy