如何解决ReactJS中使用Array.prototype.join分隔姓名时的报错问题

嘿，我来帮你捋清楚问题出在哪以及怎么解决～

你遇到的join is not a function错误，核心原因很简单：e.name是单个字符串，而join()是数组的专属方法，你不能直接对单个字符串调用它。

现在给你两个实用的解决方案，根据你的需求选就行：

方案一：保留每个姓名的独立DOM元素（适合需要给单个姓名加样式的场景） #

如果每个姓名需要单独的样式（比如你原来的ck12 o6 b4类），可以把外层的div换成行内元素span，然后在每个姓名后面判断是否添加空格（最后一个姓名不加）：

const { author } = this.props;
const authors = author.map((e, i) => (
  <span className="ck12 o6 b4" key={i}>
    {e.name}
    {/* 只有不是最后一个元素时才添加空格 */}
    {i !== author.length - 1 && ' '}
  </span>
));

// 渲染的时候直接把authors放进h4里
<div className="authorlist">
  <h4>{authors}</h4>
</div>

这里换成span是因为div是块级元素，默认会换行，用span才能让姓名在同一行显示。

方案二：直接拼接成带空格的字符串（适合不需要单个样式的场景） #

如果不需要给每个姓名单独加样式，直接把所有姓名提取成数组，再用join(' ')拼接成带空格的字符串最省事：

const { author } = this.props;
// 先提取所有姓名到数组，再用空格拼接
const authorNames = author.map(item => item.name).join(' ');

// 直接渲染拼接好的字符串
<div className="authorlist">
  <h4>{authorNames}</h4>
</div>

这种方法代码更简洁，也完全能实现你要的John Tom Jack效果。

总结一下：你之前的错误是把单个姓名字符串当成数组来操作，现在只要先把所有姓名收集成数组，或者在渲染时判断添加空格，就能解决问题啦～

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