React中如何按Genre过滤JSON数据生成演唱会日历卡片？

当然可以通过条件判断跳过不符合Genre的数据，下面是两种常用的实现方式：

方法一：先筛选数据再渲染（推荐） #

先利用数组的filter方法过滤出符合条件的数据，再对筛选后的数组进行渲染。这种方式性能更优，因为减少了后续循环渲染的次数。

示例代码：

import concertsData from './concerts.json';

function ConcertCalendar() {
  // 筛选出Genre为"Konzert - Rock"的演唱会数据
  const rockConcerts = concertsData.filter(concert => concert.Genre === "Konzert - Rock");

  return (
    <div className="concert-calendar">
      {rockConcerts.map(concert => (
        <div key={concert.id} className="concert-card">
          <h3>{concert.Title}</h3>
          <p>日期: {concert.Date}</p>
          <p>地点: {concert.Venue}</p>
        </div>
      ))}
    </div>
  );
}

export default ConcertCalendar;

方法二：渲染时直接判断跳过 #

在map循环内部添加条件判断，不符合Genre要求的项返回null，React会自动跳过这类空值的渲染。这种方式适合需要保留原数据顺序，且可能需要结合其他动态条件调整渲染逻辑的场景。

示例代码：

import concertsData from './concerts.json';

function ConcertCalendar() {
  return (
    <div className="concert-calendar">
      {concertsData.map(concert => {
        // 不符合条件则返回null，跳过当前卡片渲染
        if (concert.Genre !== "Konzert - Rock") return null;
        
        return (
          <div key={concert.id} className="concert-card">
            <h3>{concert.Title}</h3>
            <p>日期: {concert.Date}</p>
            <p>地点: {concert.Venue}</p>
          </div>
        );
      })}
    </div>
  );
}

export default ConcertCalendar;

两种方式的区别 #

• 方法一提前过滤数据，减少了map循环的次数，数据量大时性能优势更明显；
• 方法二在循环内判断，更灵活，适合需要根据实时状态动态调整筛选条件的场景。

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