如何根据用户选中的疫苗从Firestore获取daysApart计算第二剂接种日期

解决方法 #

你已经在父组件的vaccines状态里存了从Firestore拉取的所有疫苗完整数据（包含daysApart字段），不需要额外发起Firestore请求，直接从本地数组匹配选中疫苗即可，具体修改如下：

1. 修正疫苗选中状态的初始值，和下拉选项的字符串类型对齐：

// 原代码const [selectedVaccine, setSelectedVaccine] = useState(0); 替换为
const [selectedVaccine, setSelectedVaccine] = useState("");

2. 新增副作用监听选中疫苗、第一剂接种日期的变化，自动计算第二剂日期：

// 放在handleChangeVaccine之后即可
useEffect(() => {
  // 未选疫苗或选中单剂的强生疫苗，无需计算
  if (!selectedVaccine || selectedVaccine === "J&J") return;
  // 匹配对应疫苗的间隔天数
  const targetVaccine = vaccines.find(item => item.vaccine === selectedVaccine);
  if (!targetVaccine) return;
  const intervalDays = targetVaccine.daysApart;
  // 转换第一剂日期格式并计算第二剂日期
  const firstDate = new Date(firstDose);
  const secondDate = new Date(firstDate);
  secondDate.setDate(firstDate.getDate() + intervalDays);
  // 格式化日期为MM/dd/yyyy
  const month = String(secondDate.getMonth() + 1).padStart(2, '0');
  const day = String(secondDate.getDate()).padStart(2, '0');
  const year = secondDate.getFullYear();
  setSecDose(`${month}/${day}/${year}`);
}, [selectedVaccine, firstDose, vaccines]);

3. 删除原有静态计算secondDose的代码段，后续第二剂日期会自动根据当前选择动态更新。

优化建议：建议将第一剂接种日期的输入框也替换为DatePicker组件，避免用户手动输入非法日期格式导致计算出错。

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