PrimeReact日历组件numberOfMonths=18时重复Key警告的解决方案咨询

问题描述 #

使用PrimeReact的Calendar组件并设置numberOfMonths={18}时，第12个月之后的月份会生成重复的子元素Key（如8），触发React警告：

Warning: Encountered two children with the same key, `8`. Keys should be unique so that components maintain their identity across updates.....

组件代码：

<Calendar 
  value={dates} 
  onChange={(e: CalendarChangeEvent) => verticalDateHandler(e.value)}
  numberOfMonths={18} 
  minDate={today} 
  selectionMode="range" 
  dateFormat="YYYY MMM DD" 
  touchUI 
  inline 
  viewDate={today}
/>

已尝试移除touchUI、viewDate属性，更新Locale均无效。

解决方案 #

1. 使用自定义月份模板生成唯一Key #

PrimeReact的Calendar提供monthTemplate属性，可自定义月份区域的渲染逻辑，借此生成包含年份+月份的唯一Key：

<Calendar 
  value={dates} 
  onChange={(e: CalendarChangeEvent) => verticalDateHandler(e.value)}
  numberOfMonths={18} 
  minDate={today} 
  selectionMode="range" 
  dateFormat="YYYY MMM DD" 
  touchUI 
  inline 
  viewDate={today}
  monthTemplate={(date) => {
    // 生成格式为「年份-月份索引」的唯一标识
    const uniqueKey = `${date.getFullYear()}-${date.getMonth()}`;
    // 保留原月份的显示内容，比如月份名称
    const monthName = new Intl.DateTimeFormat('zh-CN', { month: 'short' }).format(date);
    return <div key={uniqueKey} className="p-calendar-month">{monthName}</div>;
  }}
/>

该方法通过将年份纳入Key，确保跨年份的同月份拥有唯一标识，从根源解决重复Key问题。

2. 向PrimeReact官方提交Bug反馈 #

此问题属于组件内部Key生成逻辑缺陷——当渲染跨年份的多月份时，仅使用0-11的月份索引作为Key，导致重复。可直接前往PrimeReact的GitHub仓库提交Issue，说明场景（numberOfMonths>12）和问题，等待官方修复。

3. 临时抑制警告（应急方案） #

若需快速隐藏警告但不修复根源，可在组件中拦截特定控制台警告：

import { useEffect } from 'react';

// 在组件内部添加
useEffect(() => {
  const originalError = console.error;
  console.error = (...args) => {
    // 过滤重复Key的警告
    if (typeof args[0] === 'string' && args[0].includes('Encountered two children with the same key')) {
      return;
    }
    originalError.apply(console, args);
  };
  // 组件卸载时恢复原控制台方法
  return () => {
    console.error = originalError;
  };
}, []);

⚠️ 此方法仅隐藏警告，不解决实际问题，不推荐长期使用。

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