如何分隔演员列表的数组项，修复.join()方法不是函数的报错

• join()是JavaScript数组的专属方法，你当前代码中调用join()的对象actor.Name是单个字符串，不属于数组类型，因此会抛出「方法不是函数」的类型错误。
• 逻辑层面你也把join()的调用位置放错了：你现在是在遍历每个演员的回调内部调用，相当于要给单个演员名称加分隔符，而分隔符本身是需要放在两个演员条目之间的。

推荐两种常用的兼容React的实现方式：

方案1：使用reduce方法拼接渲染数组（无多余节点） #

{movie.Actors.reduce((result, actor, index) => {
  // 除了第一个条目外，其余条目前先拼接逗号分隔符
  if (index !== 0) {
    result.push(', ')
  }
  // 插入演员跳转链接，记得加唯一key避免React列表警告
  result.push(
    <Link 
      to={`/actors/${actor.Name}`} 
      className="value" 
      key={actor.Name}
    >
      {actor.Name}
    </Link>
  )
  return result
}, [])}

方案2：CSS实现分隔符（维护性更高） #

JSX部分直接正常渲染列表即可：

{movie.Actors.map(actor => (
  <span className="actor-item" key={actor.Name}>
    <Link to={`/actors/${actor.Name}`} className="value">{actor.Name}</Link>
  </span>
))}

添加对应CSS样式，自动在除了最后一个条目外的所有元素后加逗号分隔：

.actor-item:not(:last-child)::after {
  content: ", ";
}

这种方式后续要修改分隔符样式、更换分隔符内容都只需要调整CSS，无需修改逻辑代码，推荐优先使用。

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