为何useState修改日期状态后未触发React组件重渲染？

你的问题核心在于违反React状态不可变原则、日期格式不匹配，以及控件绑定不严谨导致UI无法同步更新，以下是具体修正方案：

问题分析 #

1. 直接修改状态对象：代码中prev.startdate = ...的写法违反了React状态不可变规则，即便最后返回了展开后的新对象，这种操作仍可能导致React无法正确检测状态变化。
2. 日期格式不匹配：new Date().toISOString()生成的是ISO标准格式（如2023-04-19T12:00:00.000Z），但初始状态的日期格式为MM/DD/YYYY，格式不一致会让输入控件无法正确识别新值，看起来UI没更新。
3. 控件绑定不严谨：若输入控件的value未严格绑定到form.startdate，状态更新后也无法同步到UI。

修正方案 #

1. 遵循状态不可变原则，正确更新状态

不要直接修改prev对象，通过展开运算符创建新对象并覆盖startdate，同时生成和初始格式一致的日期：

const [form, setForm] = useState({
  num:"12345",
  startdate: "06/14/2023",
  enddate: "06/01/2023"
});

const revertStartDate = (field) => {
  if (field === 'enddate') {
    // 生成 MM/DD/YYYY 格式的当前日期
    const now = new Date();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const year = now.getFullYear();
    const formattedCurrentDate = `${month}/${day}/${year}`;

    setForm(prev => ({
      ...prev,
      startdate: formattedCurrentDate
    }));
  }
};

2. 确保表单控件正确绑定状态

日期输入控件必须严格绑定form.startdate和form.enddate，并在onChange中正确更新状态：

{/* 开始日期输入框 */}
<input
  type="text"
  placeholder="MM/DD/YYYY"
  value={form.startdate}
  onChange={(e) => {
    setForm(prev => ({
      ...prev,
      startdate: e.target.value
    }));
  }}
/>

{/* 结束日期输入框 - 修改时触发验证逻辑 */}
<input
  type="text"
  placeholder="MM/DD/YYYY"
  value={form.enddate}
  onChange={(e) => {
    const newEndDate = e.target.value;
    setForm(prev => ({
      ...prev,
      enddate: newEndDate
    }));
    // 触发验证并重置开始日期
    revertStartDate('enddate');
  }}
/>

3. 补充验证逻辑（可选）

可以在revertStartDate中先判断startdate是否真的大于enddate，避免不必要的状态更新：

const revertStartDate = (field) => {
  if (field === 'enddate') {
    // 将日期字符串转为Date对象进行比较
    const start = new Date(form.startdate);
    const end = new Date(form.enddate);
    
    if (start > end) {
      const now = new Date();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const year = now.getFullYear();
      const formattedCurrentDate = `${month}/${day}/${year}`;

      setForm(prev => ({
        ...prev,
        startdate: formattedCurrentDate
      }));
    }
  }
};

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