如何用useRef在组件重渲染时重置状态并存储旧状态？

你的核心问题是错误地在条件分支中声明useRef，违反了React Hook的调用规则，同时没做到在有效状态时持续更新ref的值。以下是正确的实现方式：

关键修正点 #

• useRef必须在组件顶层调用，不能放在if/else这类条件判断里，否则会导致Hook调用顺序混乱
• 要在每次状态有效时，主动更新ref的current值，确保它始终保存最新的有效状态
• 当检测到状态无效时，直接用ref中存储的有效值恢复当前状态

完整实现代码 #

import { useRef, useState } from 'react';

// 假设你的DateRangePickerState类型定义
type DateRangePickerState = {
  value: Date[]; // 示例：日期范围数组
  setValue: (value: Date[]) => void;
};

function DateRangePicker() {
  // 初始化日期选择器状态
  const [dateValue, setDateValue] = useState<Date[]>([new Date(), new Date()]);
  // 用useRef存储有效的旧状态，初始值设为初始的有效日期
  const validOldStateRef = useRef<Date[]>(dateValue);

  // 日期有效性校验函数
  function checkDateValidity(value: Date[]): boolean {
    // 这里写你的校验逻辑，比如结束日期不能早于开始日期
    return value[1] >= value[0];
  }

  // 处理日期变更的函数
  const handleDateChange = (newValue: Date[]) => {
    // 先校验新状态
    if (checkDateValidity(newValue)) {
      // 有效则更新状态，同时更新ref存储最新有效值
      setDateValue(newValue);
      validOldStateRef.current = newValue;
    } else {
      // 无效则用ref中保存的旧有效状态恢复
      setDateValue(validOldStateRef.current);
    }
  };

  return (
    // 这里渲染你的日期选择器组件，绑定handleDateChange
    <div>
      {/* 示例UI，替换为实际的日期选择器组件 */}
      <input
        type="date"
        value={dateValue[0].toISOString().split('T')[0]}
        onChange={(e) => {
          const newStartDate = new Date(e.target.value);
          handleDateChange([newStartDate, dateValue[1]]);
        }}
      />
      <span>至</span>
      <input
        type="date"
        value={dateValue[1].toISOString().split('T')[0]}
        onChange={(e) => {
          const newEndDate = new Date(e.target.value);
          handleDateChange([dateValue[0], newEndDate]);
        }}
      />
    </div>
  );
}

额外说明 #

• 如果你使用的是第三方日期选择器组件（比如Ant Design的DatePicker.RangePicker），只需要把handleDateChange绑定到组件的onChange事件即可
• 这种方式不需要依赖localStorage，因为useRef的current值会在组件生命周期内持续保存，不会因为重渲染而丢失，同时能存储包含函数的状态结构（如果你的状态里有函数的话）

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