React中setState依赖兄弟组件状态实现出生日期校验的问题

你现在的代码有两个核心错误导致无法选中其他月份：

• 你把watchYearChange同时用作了月份选择器的onChange回调和年份变化的监听回调，只要你手动选月份就会触发逻辑，只要当前年份是2003，不管你选什么月份都会被强制改回10月。
• useEffect的逻辑写反了生效范围，你在非2003年的场景下也重复对selectedMonth做了无意义赋值，反而会引发状态更新异常。

步骤1：调整月份选择器的回调 #

把月份选择器的onChange改回普通的状态更新函数，不要和年份监听逻辑复用：

<SelectBirthMonth 
  startYear={startYear}
  selectedYear={selectedYear}
  months={months}
  value={selectedMonth}
  reducedMonths={reducedMonths}
  onChange={setSelectedMonth}
/>

步骤2：重写年份监听逻辑 #

仅在切换年份时做校验，只有同时满足「选中年份为2003」、「当前选中月份大于10月」两个条件时，才重置月份为10月，其他场景不修改已选月份：

const [selectedMonth, setSelectedMonth] = useState(months[0]);

useEffect(() => {
  const currentSelectedYear = Number(selectedYear.name)
  // 仅当选中年份为2003，且当前月份大于10月时才重置
  if (currentSelectedYear === startYear && Number(selectedMonth.name) > 10) {
    setSelectedMonth(months[9])
  }
}, [selectedYear, selectedMonth, startYear, months])

如果要更严谨，还可以加日期的联动校验：当月份被重置为10月后，如果之前选中的日期大于10月的最大天数（31天），同步将日期重置为当月最后一天，避免出现无效日期。

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