Javascript 映射函数未应用于所有表达式

我正在尝试使用map函数over，genres数组来渲染流派名称和流派渐变。map函数对于流派名称很好，但是对于流派渐变，它返回相同的组件

我试着检查控制台。我可以看到两种不同的颜色，但屏幕上的最终输出是相同颜色的“GenreGradient”组件

请帮我做同样的事情

请在下面找到我的代码

import React, { useContext } from 'react';
import {
  GenreContainer,
  Genre,
  GenreName
} from '../../styles/componentStyles/GenreDetails/genreCommonStyles';

import {
  TheGrandPhilisophers,
  GuidingLights,
  ArchitectsOfFuture,
  MaverickScientists,
  Luminaries,
  MenOfLetters
} from '../../styles/componentStyles/GenreDetails/genreDetails';

import GenreGradient from './GenreGradient';
import GenreFancyItemContext from '../../Context/genreFancyITem/GenreFancyItemContext';

const genres = [
  {
    genreName: 'guidingLights',
    genreGradientColor: '#34e89e'
  },
  {
    genreName: 'luminaries',
    genreGradientColor: '#3b4490'
  }
];

console.log(genres);

const GenreDetails = () => {
  const genreFancyItemContext = useContext(GenreFancyItemContext);

  const { getGenreName } = genreFancyItemContext;

  return (
    <GenreContainer>
      {genres.map(genre => (
        <Genre to={`/genreFancyitems/${genre.genreName}`}>
          <GenreGradient genreColor={`${genre.genreGradientColor}`} />
          <GenreName>{getGenreName(genre.genreName)}</GenreName>
        </Genre>
      ))}
    </GenreContainer>
  );
};

export default GenreDetails;

import React，{useContext}来自“React”；
进口{
GenreContainer，
体裁
更名
}来自“../styles/componentStyles/GenreDetails/genrecomonstyles”；
进口{
他们的祖父，
引导灯，
未来的建筑师，
特立独行的科学家，
杰出人物，
门诺夫莱特
}来自“../styles/componentStyles/GenreDetails/GenreDetails”；
从“/GenreGradient”导入GenreGradient；
从“../Context/genreFancyITem/GenreFancyItemContext”导入GenreFancyItemContext；
常量类型=[
{
genreName:“guidingLights”，
genreGradientColor:“#34e89e”
},
{
genreName:'发光体'，
genreGradientColor:“#3b4490”
}
];
console.log（体裁）；
const GenreDetails=（）=>{
const genreFancyItemContext=useContext（genreFancyItemContext）；
const{getGenreName}=genreFancyItemContext；
返回(
{genres.map（genre=>(
{getGenreName（genre.genreName）}
))}
);
};
导出默认版本的详细信息；

import*as React from'React'；
const GenreGradient=props=>{
控制台日志（道具）；
返回(
);
};
导出默认GenreGradient；

ID在页面中是全局的。 渲染后，您有两个id相同的元素。当您尝试使用它时（

xlinkHref=“#prefix_ua”

，

fill=“url（#prefix_ub）”

），将使用第一个元素

---

您必须为不同的元素使用不同的ID。例如，您可以使用genreName作为ID的前缀。

谢谢！Aleksandr供您输入..请帮我了解id的语法。。我有语法错误，你是怎么做的？您必须将genreName传递到genregraient中，并在id为的props中使用它。例如-

xlinkHref={`${props.genreName}}{uu a`

“url（{

{props.genreName}}{uu b

}{

{props.genreName}}}{uu b

}您能帮我填写id={code>{code>{props.genreName}{uu a}{code>{这是我正在使用的另一组ID，似乎您忘记使用backticks-

fill={`url（{props.genreName}}}}}

import * as React from 'react';

const GenreGradient = props => {
  console.log(props);
  return (
    <svg width={300} height={150} viewBox="0 0 92.704 53.017">
      <defs>
        <radialGradient
          xlinkHref="#prefix__a"
          id="prefix__b"
          cx={-428.286}
          cy={25.74}
          fx={-428.286}
          fy={25.74}
          r={46.352}
          gradientTransform="matrix(-.81297 -1.42269 1.99784 -1.14162 -241.802 -509.53)"
          gradientUnits="userSpaceOnUse"
        />
        <linearGradient id="prefix__a">
          <stop offset={0} stopColor={props.genreColor} stopOpacity={0.808} />
          <stop offset={1} stopColor={props.genreColor} stopOpacity={0} />
        </linearGradient>
      </defs>
      <path
        fill="url(#prefix__b)"
        fillRule="evenodd"
        d="M65.201 70.403h92.604v52.917H65.201z"
        transform="translate(-65.15 -70.353)"
      />
    </svg>
  );
};

export default GenreGradient;