ReactJS 按category属性过滤菜单并渲染到对应TabPanel的实现问题

你写的代码无法生效，核心是两个语法和逻辑层面的问题：

• 箭头函数语法误用：你在map的回调里写了menuItem => ( if(...) {} )，这里的圆括号是用来隐式返回紧邻的表达式值的，直接把if判断语句塞在圆括号内部，JS解析阶段就会直接报语法错误，根本执行不到后续的渲染逻辑。
• 缺少不匹配场景的返回值兜底：就算修正了语法，你只在分类匹配时返回列表项元素，不匹配的条目没有明确返回值，最终map生成的数组会混入大量undefined，React渲染时会直接抛出类型错误。

两种实现方式都可以满足需求，按需选择：

方案1：先过滤分类再渲染（推荐） #

逻辑拆分更清晰，避免重复遍历全量数据，性能更好。不用在map内部写判断，先通过filter把对应分类的条目筛出来，再执行渲染：

{/* 汉堡分类Tab面板的列表区域 */}
<div className="burgers">
  <ul>
    {menuItems
      .filter(item => item.category === "burger")
      .map(menuItem => (
        <li key={menuItem.id}>
          <h4>{menuItem.title}</h4>
          <span>{menuItem.price}</span>
          <img src={menuItem.image} alt={menuItem.title} />
          <p>{menuItem.description}</p>
          <button type="submit" onClick={() => addToCart(menuItem)}>Add to cart</button>
        </li>
      ))
    }
  </ul>
</div>

可丽饼分类的Tab面板，只要把filter的判断条件换成item.category === "crepe"，把容器className换成对应名称即可。

方案2：在map循环内部做判断适配 #

如果坚持在map遍历全量数据时做分类判断，需要做两处调整：

• 把箭头函数后面的圆括号换成花括号，开启语句块模式，允许在内部写完整的逻辑判断
• 不满足分类条件的条目，明确返回null（React会自动跳过渲染null值的节点，不会抛出错误）

{menuItems.map(menuItem => {
  if (menuItem.category === "burger") {
    return (
      <li key={menuItem.id}>
        <h4>{menuItem.title}</h4>
        <span>{menuItem.price}</span>
        <img src={menuItem.image} alt={menuItem.title} />
        <p>{menuItem.description}</p>
        <button type="submit" onClick={() => addToCart(menuItem)}>Add to cart</button>
      </li>
    )
  }
  // 非汉堡类别的条目返回null，不渲染
  return null
})}

这种写法的弊端：两个Tab面板如果都跑全量的menuItems做循环判断，会重复遍历相同的数据，数据量小的时候没有感知，数据量大时优先选择filter+map的实现方式。

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