从reactJS中的数组映射元素

Question

大家好，我有以下代码：my code

我有以下场景。我正在计算我所有技能名称的长度，如果长度大于25，我将隐藏所有其他技能，并在数量上显示有多少技能被隐藏。这一部分现在正在发挥作用。但是当我不能展示我看得见的技能时。你可以帮助我解决这个问题，并优化我的代码，如果你认为有什么问题。

谢谢。

这里是我的技能

    const skills = [
      {
        id: 1,
        name: "Html"
      },
      {
        id: 2,
        name: "css"
      },
 
   ... and so on
];

我的代码部分：

   let lengthCount = 0;
   let maxIndex = 0;
   const skill = [];

   const Skill = () => {
    skills.map((item, index) => {
      if (lengthCount <= 20) {
        maxIndex = index;
        skill.push(item.name); // I am adding items to my skill array
       }
     lengthCount = lengthCount + item.name.length;
    });

    // mapping items from skill array
    let mySkills = skill.map((perSkill) => (
      <span key={perSkill.id} className="element">
        {perSkill.name}
      </span>
     ));
    
    
    return (
      <div className="wrapper">
        <div>{mySkills}</div>+{skills.length - maxIndex - 1}
      </div>
    );

Answer 1

您将在skill数组中推送item.name。因此，数组将只包含名称，而不包含对象。所以打印perSkill，而不是perSkill.name。如果您希望skill是一个对象数组，则使用：

skill.push(item)

Answer 2

您只需将{perSkill.name}更改为{perSkill}，它就会正常工作

sandbox

Answer 3

我使用reduce来循环你的技能，每一步我们更新对象{ total，list}，如果总数+新名称长度> LIMIT_NUMBER，我们只是返回旧的。如果不是，我们将新项目附加到object.list并增加总数。

​

const LIMIT_NUMBER = 5
const skills = [
      {
        id: 1,
        name: "Html"
      },
      {
        id: 2,
        name: "css"
      }]
      
const newSkillList = skills.reduce((acc, curr) => {
   if (acc.total + curr.name.length > LIMIT_NUMBER){
      return acc
   } else{
      const total = acc.total + curr.name.length
      const list = [...acc.list, curr]
      return {list, total}
   }
},{list:[], total: 0})
console.log(newSkillList)

​