为何formatSkills函数无返回值？技能列表格式化问题求助

嘿，我瞅到你遇到的问题啦，主要有两个地方踩坑了，咱们一步步来解决：

问题1：技能分割逻辑出错 #

你直接用split(',')分割字符串，会把括号里的逗号也当成分割符——比如iOS (Swift,Objective C)会被拆成" iOS (Swift"和"Objective C)"，这明显不是你想要的。

解决办法是用**正则表达式匹配「不在括号内的逗号」**来分割，这样就能保留括号里的完整技能项：

const skills = "Mobile, iOS (Swift,Objective C), Android (Java), JavaScript, React, Data processing, GIS, Cartography, Web, Design/UI/UX";
// 匹配不在括号内的逗号（后面跟空格）
const skills_array = skills.split(/, (?![^()]*\))/);
// 现在得到的数组是正确的：
// ["Mobile", "iOS (Swift,Objective C)", "Android (Java)", "JavaScript", "React", "Data processing", "GIS", "Cartography", "Web", "Design/UI/UX"]

简单解释下这个正则：(?![^()]*\))是「负向前瞻」，意思是确保当前逗号后面不会出现「非括号字符+右括号」，也就是这个逗号不在一对括号内部，完美避开括号里的逗号~

问题2：formatSkills函数没有返回值，JSX语法有误 #

原函数里有三个小问题：

1. skills_array.map(...)生成了JSX列表，但你没有把这个结果return出去，所以函数默认返回undefined；
2. JSX里的skill变量没有用{}包裹，会直接显示字符串"skill"，而不是变量对应的技能名称；
3. 分割后的元素带前导空格，最好用trim()去掉，看起来更整洁。

另外，React列表元素需要加唯一的key属性，这里用index作为兜底方案（如果技能有唯一标识的话，用标识会更稳妥）。

修正后的函数如下：

formatSkills(skills) {
  // 先正确分割技能
  const skills_array = skills.split(/, (?![^()]*\))/);
  // 返回map生成的JSX列表
  return skills_array.map((skill, index) => {
    return <li key={index}>{skill.trim()}</li>;
  });
}

这样修改后，函数就能正确返回格式化后的技能列表啦~

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