React中Axios获取API数据后SVG地图无法展示值且重复渲染求助

API返回格式为[[{"AG":2665}],[{"AR":397}],[{"AI":27}]]，用Axios请求后控制台能拿到数据，但地图上显示不出数值，还会重复渲染整个SVG。

问题代码片段 #

{count.map((ca,index) => (
  <svg
    baseprofile="tiny"
    fill="#7c7c7c"
    height="700"
    stroke="#ffffff"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="2"
    version="1.2"
    viewbox="0 0 1000 643"
    width="1000"
    xmlns="http://www.w3.org/2000/svg"
    className='kl'
  >
    <a key={index}
      xlinkTitle={ca.AG}
    >
      <path
        d="M50.2 488.8l-0.2 0.2-3.6 10-1.5 12.1-1.6 1.5-1.3 2-0.9 2.2-0.6 2.7 11-10.9 9.1-17.9 0.7 2 0.1 1.3 2.1 5.3 1 1.4 2.3 1.2 3.7-1.7 1.6 0.6 1.1 7.4-5.7 6.1-14.2 9.4-11.3 13.3-7.1 3.7-7.6-3.4-10 0.4-10.1 2.4-5.3 3.2 2.9-7 1.7-3.2 0.7-2.7-3.9-4.9-2.3-4.4 0.8-3.9 5.4-3.4 13.3-6.5 1.1-0.2 1.8 0.6 1.3 0.2 1.3-0.2 4.8-1.5 1-2.1-0.2-3 0.1-3.5 1.6-9 0.7-2.5 3.2-7.3 12.3 10.2 0.7-0.2z"
        id="CHE159"
        name="Genève"
      ></path>
    </a>
  </svg>
))}

问题分析 #

1. 数据访问错误：API返回的数组里每个元素是单个键值对的对象（比如{"AG":2665}），直接用ca.AG只能获取第一个元素的值，AR、AI对应的值根本拿不到，自然显示不出来。
2. 重复渲染SVG：在count.map里循环渲染整个<svg>标签，数组有3个元素，所以会生成3份完整的地图，导致重复渲染。

解决方案 #

1. 转换API数据格式

把嵌套数组转成扁平的键值对对象，方便后续访问：

const processedData = count.reduce((acc, item) => {
  const [key, value] = Object.entries(item[0])[0];
  acc[key] = value;
  return acc;
}, {});
// 转换后结果：{ AG: 2665, AR: 397, AI: 27 }

2. 只渲染一次SVG，循环内部区域元素

不要循环整个SVG，只循环地图里的各个区域节点：

// 先定义所有区域的路径信息（根据你的实际SVG补充）
const regions = [
  { code: 'AG', name: 'Genève', d: 'M50.2 488.8l-0.2 0.2-3.6 10-1.5 12.1-1.6 1.5-1.3 2-0.9 2.2-0.6 2.7 11-10.9 9.1-17.9 0.7 2 0.1 1.3 2.1 5.3 1 1.4 2.3 1.2 3.7-1.7 1.6 0.6 1.1 7.4-5.7 6.1-14.2 9.4-11.3 13.3-7.1 3.7-7.6-3.4-10 0.4-10.1 2.4-5.3 3.2 2.9-7 1.7-3.2 0.7-2.7-3.9-4.9-2.3-4.4 0.8-3.9 5.4-3.4 13.3-6.5 1.1-0.2 1.8 0.6 1.3 0.2 1.3-0.2 4.8-1.5 1-2.1-0.2-3 0.1-3.5 1.6-9 0.7-2.5 3.2-7.3 12.3 10.2 0.7-0.2z' },
  { code: 'AR', name: '某区域', d: '对应AR区域的路径d值' },
  { code: 'AI', name: '另一区域', d: '对应AI区域的路径d值' }
];

// 组件中渲染
<svg
  baseProfile="tiny"
  fill="#7c7c7c"
  height="700"
  stroke="#ffffff"
  strokeLinecap="round"
  strokeLinejoin="round"
  strokeWidth="2"
  version="1.2"
  viewBox="0 0 1000 643"
  width="1000"
  xmlns="http://www.w3.org/2000/svg"
  className='kl'
>
  {regions.map((region) => (
    <a key={region.code} xlinkTitle={processedData[region.code]}>
      <path
        d={region.d}
        name={region.name}
      ></path>
    </a>
  ))}
</svg>

这样处理后，每个区域能正确拿到对应的数据，也只会渲染一次SVG地图。

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