React返回段中如何判断map函数处理的数组是否为空？

首先纠正你写法里的错误：数组的长度是属性length，不是方法，不能加括号；而且要判断的是数组本身的长度，不是map方法的长度。下面是两种实用的正确写法：

1. 短路求值写法（推荐） #

利用React会忽略false、null、undefined的特性，直接通过数组长度判断是否执行map：

return (
  <>
    {functionName.length > 0 && functionName.map(item => (
      <div key={item.id}>{item.content}</div>
    ))}
  </>
)

当数组为空时，functionName.length > 0返回false，React不会渲染任何内容；数组有值时则正常执行map渲染元素。

2. 三元运算符写法 #

如果后续需要在空数组时渲染提示内容，这种写法更灵活（当前需求返回null即可）：

return (
  <>
    {functionName.length > 0 ? (
      functionName.map(item => (
        <div key={item.id}>{item.content}</div>
      ))
    ) : null}
  </>
)

额外注意事项 #

• 必须给map生成的每个元素添加唯一的key属性，避免React控制台警告
• 如果functionName可能是undefined或null，可以加兜底判断：(functionName || []).length > 0，防止读取length时抛出异常

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