React中Material-UI YearPicker如何禁用数组内指定年份

shouldDisableYear是YearPicker组件提供的年份禁用判断属性，接收一个回调函数：组件渲染年份列表时，会把每一个待渲染的年份以Date对象的形式传入这个回调，回调返回true时对应年份就会被置为不可选的禁用状态，返回false则为正常可选状态。

具体实现步骤 #

• 先统一禁用年份数组的数据类型
  从数据列表提取年份的逻辑可以加一层类型转换，确保数组里存的都是数字格式的年份，避免因为类型不匹配（比如年份是字符串格式"2023"和数字2023判断不等）导致禁用失效：

  const singleYearsArray = itemList.map(element => Number(element.year))
  setSingleYears(singleYearsArray)
  

• 给YearPicker组件配置shouldDisableYear属性
  在回调里拿到当前遍历年份的年份值，判断是否存在于你的禁用年份数组中即可，核心写法示例：

  <YearPicker
    // 你原本配置的value、onChange等其他属性保持不变
    shouldDisableYear={(yearDateObj) => {
      // 从组件传入的Date对象中取到四位数字的年份值
      const renderYear = yearDateObj.getFullYear()
      // 命中禁用数组就返回true标记为禁用
      return singleYears.includes(renderYear)
    }}
  />
  

优化&注意事项 #

• 如果你的禁用年份数量超过1000条，可以提前把禁用年份数组转成Set结构优化查找速度：

  // 拿到singleYears数组后转成Set
  const disabledYearSet = new Set(singleYears)
  // 判断时改用has方法
  shouldDisableYear={(yearDateObj) => {
    return disabledYearSet.has(yearDateObj.getFullYear())
  }}
  

  数据量小的场景直接用数组的includes方法就足够，不用额外做转换。
• 不要在shouldDisableYear的回调函数里写副作用逻辑，比如接口请求、状态更新等，这个回调会在组件渲染过程中多次执行，写副作用会引发性能问题或逻辑异常。
• shouldDisableYear的回调必须返回明确的布尔值，不要返回undefined或者其他类型值，不然会导致年份状态判断异常

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