React组件中map函数无返回内容，请求排查错误原因

数据老陈

2026-5-26

问题分析与解决

嘿，我一眼就发现问题所在啦！你的map回调函数里没有返回要渲染的<span>元素，这就是组件没输出内容的核心原因～

为什么会出现这个问题？

当你用普通函数作为map的回调时，如果没有显式写return语句，函数默认会返回undefined。这样tagsArray.map()最终生成的是一个全是undefined的数组，React渲染的时候自然不会输出任何可见内容。

修正方案

有两种简单的修复方式，选你习惯的就行：

方式1：给普通函数添加`return`

直接在回调函数里显式返回<span>元素：

function ActionTags({tags}) {
  let thisTagsHtml = tags; 
  let tagsArray = thisTagsHtml.split('##');
  console.log(tagsArray);
  return (
    <div>
      {tagsArray.map(function(item, i){
        // 显式返回span元素
        return <span key={i}>{item}</span>
      })}
    </div>
  );
}

方式2：改用箭头函数的隐式返回

箭头函数在单行表达式场景下可以省略return和大括号，写法更简洁：

function ActionTags({tags}) {
  let thisTagsHtml = tags; 
  let tagsArray = thisTagsHtml.split('##');
  console.log(tagsArray);
  return (
    <div>
      {tagsArray.map((item, i) => <span key={i}>{item}</span>)}
    </div>
  );
}

// 如果后续需要加额外逻辑，也可以写多行形式：
{tagsArray.map((item, i) => {
  // 这里可以添加比如过滤、格式化之类的逻辑
  return <span key={i}>{item}</span>
})}