React项目中实现按数组索引为JSON加载的分类数据匹配对应图标

我来帮你搞定这个问题！首先咱们得搞清楚为啥现在所有图标都一样：你在catWomen、catMen、catKids的map函数里，把所有项的icon都硬写成了<Icons2.hat02 />，完全没按照之前硬编码版本里的规则对应不同图标，这就是问题根源。

下面给你两种解决方案，第一种是你要求的else if方式，第二种是更简洁易维护的映射对象方案，都能完美匹配你原来的硬编码逻辑：

方案1：用else if条件判断（完全符合你的需求） #

直接在map循环里根据每个分类项的id来匹配对应图标，和你注释里的硬编码逻辑完全对齐：

// 处理Women分类
const catWomen = catData.catWomen.map((data) => {
  let icon;
  if (data.id === 1) {
    icon = <Icons2.seeall />;
  } else if (data.id === 2) {
    icon = <Icons2.frock01 />;
  } else if (data.id === 3) {
    icon = <Icons2.shoes06 />;
  } else if (data.id === 4) {
    icon = <Icons2.purse01 />;
  } else if (data.id === 5) {
    icon = <Icons2.bag05 />;
  } else if (data.id === 6) {
    icon = <Icons2.hat02 />;
  }
  return {
    id: data.id,
    name: data.name,
    icon: icon,
    childs: data.childs
  };
});

// 处理Men分类
const catMen = catData.catMen.map((data) => {
  let icon;
  if (data.id === 1) {
    icon = <Icons2.seeall />;
  } else if (data.id === 2) {
    icon = <Icons2.shirt1 />;
  } else if (data.id === 3) {
    icon = <Icons2.shoes1 />;
  } else if (data.id === 4) {
    icon = <Icons2.bag05 />;
  } else if (data.id === 5) {
    icon = <Icons2.purse02 />;
  } else if (data.id === 6) {
    icon = <Icons2.hat />;
  }
  return {
    id: data.id,
    name: data.name,
    icon: icon,
    childs: data.childs
  };
});

// 处理Kids分类
const catKids = catData.catKid.map((data) => {
  let icon;
  if (data.id === 1) {
    icon = <Icons2.seeall />;
  } else if (data.id === 2) {
    icon = <Icons2.shirt1 />;
  } else if (data.id === 3) {
    icon = <Icons2.shoes05 />;
  } else if (data.id === 4) {
    icon = <Icons2.bag05 />;
  } else if (data.id === 5) {
    icon = <Icons2.bow />;
  } else if (data.id === 6) {
    icon = <Icons2.hat03 />;
  }
  return {
    id: data.id,
    name: data.name,
    icon: icon,
    childs: data.childs
  };
});

方案2：用映射对象（更简洁，后续维护更方便） #

如果以后要新增分类或者修改图标，一堆else if改起来很麻烦，用映射对象就清爽多了，先定义好每个分类的图标对应关系，再直接映射：

// 先定义各分类的图标映射表
const womenIconMap = {
  1: <Icons2.seeall />,
  2: <Icons2.frock01 />,
  3: <Icons2.shoes06 />,
  4: <Icons2.purse01 />,
  5: <Icons2.bag05 />,
  6: <Icons2.hat02 />
};

const menIconMap = {
  1: <Icons2.seeall />,
  2: <Icons2.shirt1 />,
  3: <Icons2.shoes1 />,
  4: <Icons2.bag05 />,
  5: <Icons2.purse02 />,
  6: <Icons2.hat />
};

const kidsIconMap = {
  1: <Icons2.seeall />,
  2: <Icons2.shirt1 />,
  3: <Icons2.shoes05 />,
  4: <Icons2.bag05 />,
  5: <Icons2.bow />,
  6: <Icons2.hat03 />
};

// 快速映射分类数据，...data是直接复制原有属性，再加上icon
const catWomen = catData.catWomen.map(data => ({
  ...data,
  icon: womenIconMap[data.id] || <Icons2.hat02 /> // 加个默认图标防止找不到对应id的情况
}));

const catMen = catData.catMen.map(data => ({
  ...data,
  icon: menIconMap[data.id] || <Icons2.hat />
}));

const catKids = catData.catKid.map(data => ({
  ...data,
  icon: kidsIconMap[data.id] || <Icons2.hat03 />
}));

小提示 #

两种方案都能实现和你之前硬编码版本完全一样的图标显示效果。如果你的分类以后可能会变动，我更推荐方案2，维护起来省心很多～

内容的提问来源于stack exchange，提问作者Nuwan Chamikara