React拆分日期组件修改useState初始值后空输入时setState不更新问题

• 直接对dateInputValue执行split操作没有做非空兜底：当dateInputValue为空字符串、undefined、null时，split("-")要么返回[""]，要么直接抛出调用错误，此时解构出来的initialMonth、initialYear会是undefined。如果是调用错误直接导致组件渲染中断，就会出现输入后setState不生效、界面无响应的现象。
• 初始state可能存在undefined值：即便没有抛出错误，未兜底的初始值会让month、year的初始值为undefined，结合你原useEffect逻辑要求三个值都非空才会向外同步，在用户未输完全部三个字段时，表单始终拿不到返回值，自然会提示校验不通过。
• 初始值仅在组件首次渲染生效：如果父组件后续会更新传入的dateInputValue，现有逻辑不会同步更新内部的三个state，会出现内外值不一致的问题。

首先给初始值加空值兜底，避免报错和undefined的情况：

// 先拆分，每一位都给空字符串作为兜底
const dateParts = dateInputValue?.split("-") ?? [];
const [initialDay = "", initialMonth = "", initialYear = ""] = dateParts;

const [day, setDay] = useState(initialDay);
const [month, setMonth] = useState(initialMonth);
const [year, setYear] = useState(initialYear);

如果需要响应父组件后续传入的dateInputValue变化，增加同步逻辑：

useEffect(() => {
  const dateParts = dateInputValue?.split("-") ?? [];
  const [newDay = "", newMonth = "", newYear = ""] = dateParts;
  setDay(newDay);
  setMonth(newMonth);
  setYear(newYear);
}, [dateInputValue]);

如果需要支持半输入状态的同步，可以调整原有useEffect的判断逻辑，不需要三个值都非空就向外传递：

useEffect(() => {
  // 调整为只要值发生变化就向外同步，半输入状态也可以传递拼接后的字符串
  const dateValue = `${day}-${month}-${year}`;
  if (storedDateValue.current !== dateValue) {
    storedDateValue.current = dateValue;
    changeDate(dateValue);
  }
}, [day, month, year, changeDate]);

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