Next JS按值分组遍历：如何按指定类别顺序循环数据？

实现思路 #

1. 定义固定的类别优先级数组，明确你需要的渲染顺序：Nightclubs → Bars & Cocktails → Other
2. 基于这个数组，将原始数据按类别分组
3. 依次渲染每个分组的内容（仅当分组有数据时渲染）

代码示例 #

首先在组件中处理数据并分组：

export default function NightOutGuide({ guideData }) {
  // 原始数据，空数组兜底避免报错
  const nightOutList = guideData?.night_out_list || [];
  // 指定类别渲染顺序
  const categoryOrder = ['Nightclubs', 'Bars & Cocktails', 'Other'];

  // 按指定顺序分组，同时过滤空分组
  const groupedCategories = categoryOrder.map(category => ({
    categoryName: category,
    items: nightOutList.filter(item => item.main_category === category)
  })).filter(group => group.items.length > 0);

  return (
    <div className="night-out-guide">
      {groupedCategories.map(({ categoryName, items }) => (
        <section key={categoryName}>
          {/* 渲染类别标题 */}
          <h2>{categoryName}</h2>
          {/* 渲染当前类别下的所有项 */}
          {items.map((item, index) => (
            <div key={`${categoryName}-${index}`} className="location-card">
              <h3>{item.location_name}</h3>
              <p className="type">{item.type_title}</p>
              {/* 根据需要渲染其他字段，比如描述、链接等 */}
              {item.location_description && (
                <p className="description">{item.location_description}</p>
              )}
            </div>
          ))}
        </section>
      ))}
    </div>
  );
}

代码说明 #

• 类别顺序控制：categoryOrder数组直接决定了渲染的先后顺序，后续如果需要调整顺序，只需修改这个数组即可
• 空分组过滤：通过.filter(group => group.items.length > 0)确保只渲染有数据的类别，避免出现空的标题区块
• Key的使用：用categoryName作为分组的key，用${categoryName}-${index}作为每个项的key，保证React渲染时的稳定性

替代方案（直接分块渲染） #

如果觉得分组逻辑多余，也可以直接按顺序分别过滤并渲染每个类别：

export default function NightOutGuide({ guideData }) {
  const nightOutList = guideData?.night_out_list || [];

  return (
    <div className="night-out-guide">
      {/* 渲染Nightclubs */}
      {nightOutList.filter(item => item.main_category === 'Nightclubs').length > 0 && (
        <section>
          <h2>Nightclubs</h2>
          {nightOutList.filter(item => item.main_category === 'Nightclubs').map((item, index) => (
            <div key={`nightclub-${index}`} className="location-card">
              {/* 内容渲染 */}
            </div>
          ))}
        </section>
      )}

      {/* 渲染Bars & Cocktails */}
      {nightOutList.filter(item => item.main_category === 'Bars & Cocktails').length > 0 && (
        <section>
          <h2>Bars & Cocktails</h2>
          {nightOutList.filter(item => item.main_category === 'Bars & Cocktails').map((item, index) => (
            <div key={`bar-${index}`} className="location-card">
              {/* 内容渲染 */}
            </div>
          ))}
        </section>
      )}

      {/* 渲染Other */}
      {nightOutList.filter(item => item.main_category === 'Other').length > 0 && (
        <section>
          <h2>Other</h2>
          {nightOutList.filter(item => item.main_category === 'Other').map((item, index) => (
            <div key={`other-${index}`} className="location-card">
              {/* 内容渲染 */}
            </div>
          ))}
        </section>
      )}
    </div>
  );
}

这种方式代码更直白，但如果类别数量较多，维护成本会更高，推荐用第一种分组的方式。

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