React嵌套数组对象映射问题：如何让项目显示对应语言图标

问题根源 #

你当前的Project组件中，直接遍历了整个projectList数组来生成图标，导致每个Project实例都会渲染所有项目的语言图标，而非当前项目的专属图标。

修复步骤 #

1. 给Project组件传递当前项目的语言数组

在Realisation组件的映射逻辑中，新增lang属性，将当前项目的语言数组传递给Project组件：

function Realisation() {
  const projects = projectList.map(item => {
    return <Project
      key={item.key}
      title={item.name}
      link={item.link}
      lang={item.lang} // 新增：传递当前项目的语言数组
    />
  })

  // 其余代码保持不变
  return (
    <div className="realisations pro-block">
        <BlockTitle
            title="Réalisations"
            close={closeReal}
        />
        <div className="realisation-content">
            {projects}
        </div>
        <BlockNav
            left="Compétences"
            switchl={switchComp}
            center="Parcours Porfessionnel"
            switchc={switchParcoursPro}
            right="Parcours Académique"
            switchr={switchParcoursAcad}
        />
    </div>
  )
}

2. 修改Project组件，仅渲染当前项目的语言图标

删除遍历整个projectList的逻辑，直接使用props传入的lang数组生成图标：

function Project(props) {
  // 仅映射当前项目的语言数组
  const projectLang = props.lang.map(lang => {
    return <ProjectLangIcon
      key={lang.name} // 用语言名称作为唯一key（若有重复可给语言对象加key属性）
      src={lang.src}
      alt={lang.alt}
    />
  })

  return (
    <div className="project">
      <a href={props.link} className="project-txt" target="_blank">{props.title}</a>
      <div className="project-content">
        {projectLang}
      </div>
    </div>
  )
}

可选优化（规范key值）

如果担心语言名称重复，可以给每个语言对象添加唯一key属性：

const css = {
  key: "css",
  name: "CSS",
  src: cssIcon,
  alt: "Icône CSS"
}

const html = {
  key: "html",
  name: "HTML",
  src: htmlIcon,
  alt: "Icône HTML"
}

之后在Project组件中使用key={lang.key}即可。

内容的提问来源于stack exchange，提问作者Serrano Paul