React组件如何筛选数组匹配数据并渲染生日祝福

原代码存在的问题 #

• Array.find() 仅会返回第一个匹配到的元素，无法获取所有当日过生日的人员
• 采用alert()弹窗的提示方式，无法实现React组件内的DOM渲染需求
• 存在语法错误：alert("Have a nice day!); 字符串缺少闭合引号
• 存在逻辑隐患：JS原生Date.getMonth()返回值范围为0-11（0代表1月，11代表12月），如果生日数据中月份按自然月1-12存储，直接匹配会出现日期错位

正确实现代码 #

const BirthdayList = () => {
  const birthdays = [
    { name: "Bob Marley", birthmonth: 6, birthdate: 13 },
    { name: "Lakshan Test", birthmonth: 6, birthdate: 13 },
    { name: "Peter Pan", birthmonth: 7, birthdate: 4 },
  ];

  const today = new Date();
  // 筛选所有当日生日人员，若你的birthmonth按0-11存储，去掉下方的+1即可
  const todayBirthdays = birthdays.filter(item => {
    return item.birthdate === today.getDate() && item.birthmonth === today.getMonth() + 1;
  });

  return (
    <div>
      {/* 逐行渲染生日祝福 */}
      {todayBirthdays.length ? (
        todayBirthdays.map(person => (
          <div key={person.name}>Happy Birthday {person.name}!</div>
        ))
      ) : (
        <div>今日无过生日人员</div>
      )}
    </div>
  );
};

export default BirthdayList;

关键逻辑说明 #

• 用Array.filter()替代find()做筛选，可拿到所有符合月日匹配条件的人员数组
• 直接在JSX中通过Array.map()遍历筛选结果，逐行输出祝福内容，完全替代弹窗方案
• 列表渲染时给每个项加唯一key属性，符合React渲染规范，若存在重名人员建议给每条数据加唯一ID作为key
• 月份匹配逻辑可根据自身数据存储规则调整，避免出现月份差1的匹配错误

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