react-skillbars组件显示数量受限？超10个无进度条及等级

我之前在使用react-skillbars时也碰到过几乎一模一样的问题！当时折腾了好一阵才找到突破口，给你分享几个排查和解决的方向：

1. 检查循环渲染的key属性是否正确 #

很多时候React组件渲染异常都和key有关。如果你是用数组索引作为每个技能项的key，当数组长度超过10时，React可能会错误地复用组件实例，导致后续项的进度条没有正确初始化。

错误示例：

{skills.map((skill, index) => (
  <Skillbar key={index} {...skill} />
))}

正确做法：
用技能项的唯一标识（比如名称、ID）作为key，确保每个项的key稳定且唯一：

{skills.map(skill => (
  <Skillbar key={skill.name} {...skill} />
))}

2. 排查组件初始化逻辑的限制 #

有些进度条组件会在挂载时一次性计算所有项的宽度和动画状态，如果渲染的元素过多，可能会出现后面的元素还未完成DOM挂载，初始化逻辑就已经执行完毕的情况，导致进度条没有被正确渲染。

你可以尝试在所有技能项渲染完成后，手动触发组件的重新渲染：

import { useEffect, useState } from 'react';

function SkillBarContainer({ skills }) {
  const [rendered, setRendered] = useState(false);

  useEffect(() => {
    // 等待DOM渲染完成后再触发更新
    setRendered(true);
  }, []);

  return <Skillbars skills={rendered ? skills : []} />;
}

3. 检查组件的CSS样式是否存在溢出/截断问题 #

有时候不是组件逻辑的问题，而是CSS容器的高度限制导致后面的进度条被隐藏了。你可以打开浏览器开发者工具，检查技能项容器的height、overflow属性，或者每个skillbar的padding、margin设置，看看是否因为项数过多导致进度条被挤出可视区域。

4. 确认数据生成的正确性 #

虽然你说数据结构和官方一致，但还是建议你打印一下超过10个项时的skills数组，确认每个项的level值都是有效的数字（比如1-100之间），有没有出现undefined或者0的情况——如果level值异常，组件自然不会显示进度条。

5. 拆分技能数组分批渲染 #

如果以上方法都没用，可能是组件内部有硬编码的长度限制（比如默认只处理前10个项）。这种情况下，你可以把skills数组拆分成多个子数组，每个子数组用一个独立的Skillbars组件渲染：

const chunkSkills = (arr, size) => {
  return arr.reduce((acc, item, index) => {
    const chunkIndex = Math.floor(index / size);
    if (!acc[chunkIndex]) acc[chunkIndex] = [];
    acc[chunkIndex].push(item);
    return acc;
  }, []);
};

// 每5个技能项一组
const skillChunks = chunkSkills(skills, 5);

return (
  <div className="skill-container">
    {skillChunks.map((chunk, index) => (
      <Skillbars key={index} skills={chunk} />
    ))}
  </div>
);

如果是使用第三方的react-skillbars库，也可以去看看它的代码仓库有没有类似的issue，或者升级到最新版本试试——说不定这个bug已经被修复了。

内容的提问来源于stack exchange，提问作者Cristobal G.