React中map渲染组件后用join出现[object Object]问题求助

你遇到的问题核心在于：map返回的是React元素对象数组，而join(' , ')是针对字符串数组的方法——当对对象数组调用join时，每个React元素对象会被强制转换成字符串，结果自然就是[object Object]。

下面提供3种可行的解决方式，按需选择：

方法1：通过索引判断添加逗号 #

在map中利用元素索引，给除最后一个之外的元素后添加逗号：

{artist?.genres?.map((genre, index) => (
  <HStack key={genre.id} cursor="pointer" role="group" spacing={1}>
    <Text textTransform="uppercase" fontSize="lg">
      {genre.name}
    </Text>
    {/* 非最后一个元素时显示逗号 */}
    {index < artist.genres.length - 1 && <Text>, </Text>}
  </HStack>
))}

方法2：用reduce拼接元素 #

通过reduce逐个拼接React元素与分隔符，适合需要灵活控制拼接逻辑的场景：

{artist?.genres?.reduce((prevEl, genre, index) => {
  const currentGenre = (
    <Box key={genre.id} cursor="pointer" role="group">
      <HStack spacing={1}>
        <Text textTransform="uppercase" fontSize="lg">
          {genre.name}
        </Text>
      </HStack>
    </Box>
  );
  
  return index === 0 ? currentGenre : <>{prevEl} , {currentGenre}</>;
}, null)}

方法3：CSS伪元素实现（最简洁） #

用CSS伪元素自动添加逗号，无需修改JSX逻辑：

{artist?.genres?.map((genre) => (
  <Box 
    key={genre.id} 
    cursor="pointer" 
    role="group" 
    className="genre-tag"
  >
    <HStack spacing={1}>
      <Text textTransform="uppercase" fontSize="lg">
        {genre.name}
      </Text>
    </HStack>
  </Box>
))}

对应的CSS样式：

.genre-tag:not(:last-child)::after {
  content: ", ";
  margin: 0 8px; /* 可按需调整逗号与元素的间距 */
}

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