React+Material UI表格渲染SVG加密货币图标重复问题求助

问题原因 #

你遇到的图标重复问题，核心原因是map渲染时使用了数组索引作为key。React依赖key来区分列表中的不同元素，如果用索引当key，组件重新渲染时，React可能会复用之前的组件实例，导致图标没有正确更新，出现重复显示的情况。

另外，当前的图标匹配函数用多层if-else，虽然逻辑没问题，但可以优化得更简洁可靠。

解决方案 #

1. 替换列表渲染的key为唯一标识 #

把TableRow的key={id}改成key={row.currencyId}，每个货币的ID是唯一的，能让React准确识别每一行元素：

{rows.map((row) => (
  <TableRow key={row.currencyId}>
    <TableCell component="th" scope="row">{find_corresponding_icon(row.currencyId)}</TableCell>
    <TableCell align="right">{row.tokenName}</TableCell>
    <TableCell align="right">{row.Amount}</TableCell>
  </TableRow>
))}

2. 优化图标匹配逻辑（可选，更健壮） #

用对象映射代替if-else，代码更简洁，也能避免逻辑错误：

// 定义图标映射对象
const iconMap = {
  1: <EthIcon />,
  2: <DaiIcon />,
  3: <UsdtIcon />
};

// 替换原匹配函数
const getTokenIcon = (currencyId) => {
  return iconMap[currencyId] || null; // 无匹配时返回null或默认图标
};

表格中调用优化后的函数：

<TableCell component="th" scope="row">{getTokenIcon(row.currencyId)}</TableCell>

3. 确保SVG组件独立标识（兜底方案） #

如果仍有问题，给每个SVG组件加上独立key，避免复用混淆：

const iconMap = {
  1: <EthIcon key="eth-icon" />,
  2: <DaiIcon key="dai-icon" />,
  3: <UsdtIcon key="usdt-icon" />
};

总结 #

最关键的修复是把列表key从索引换成唯一的currencyId，这能让React正确区分每一行元素，避免组件复用导致的图标重复。优化图标匹配逻辑可提升代码可维护性。

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