React Hooks中点击事件如何恢复useState初始值？

嘿，你的思路其实完全没问题！先给你吃个定心丸——把初始状态抽成单独变量再重置的方案，是React里恢复状态最常用也最靠谱的做法之一。下面给你详细拆解几种可行的方式，你可以根据场景选择：

1. 抽离初始状态常量（最推荐） #

这就是你一开始想到的方案，不仅正确，而且是维护性最高的做法：

// 把初始状态定义在组件外部（或内部，按需选择）
const initialSortState = { name: 'productName', direction: 'ASC' };

function ProductList() {
  const [sortingOptions, setSortingOptions] = useState(initialSortState);

  const resetSorts = () => {
    // 直接传入初始状态常量完成重置
    setSortingOptions(initialSortState);
  };

  // ...其他排序逻辑、页面渲染代码
}

为什么推荐？ #

• 单一数据源：初始状态只定义一次，后续要修改默认排序规则时，只需要改initialSortState这一处，不会出现漏改的情况。
• 可读性强：其他开发者一眼就能明白重置后的状态是什么，代码逻辑清晰易懂。

2. 直接在重置函数中写字面量（适合简单场景） #

如果你的初始状态特别简单，而且确定不会频繁修改，也可以直接在resetSorts里写死初始值：

function ProductList() {
  const [sortingOptions, setSortingOptions] = useState({ 
    name: 'productName', 
    direction: 'ASC' 
  });

  const resetSorts = () => {
    setSortingOptions({ name: 'productName', direction: 'ASC' });
  };
}

注意点： #

这种方式的缺点很明显——存在重复代码。如果以后要修改默认排序字段或者方向，你需要同时修改useState的初始值和resetSorts里的内容，很容易出错，所以只推荐给非常简单且稳定的状态场景。

3. 用useRef保存动态初始状态（特殊场景） #

如果你的初始状态不是固定的，而是依赖于组件的props或者其他动态计算的值，那可以用useRef来保存组件挂载时的初始状态，避免每次渲染重新计算：

function ProductList({ defaultSortField }) {
  // 动态生成初始状态（比如从props获取默认字段）
  const initialSortState = { 
    name: defaultSortField, 
    direction: 'ASC' 
  };
  // 用useRef存下挂载时的初始值，避免后续渲染被覆盖
  const initialSortRef = useRef(initialSortState);

  const [sortingOptions, setSortingOptions] = useState(initialSortRef.current);

  const resetSorts = () => {
    // 重置到组件第一次挂载时的初始状态，而非当前props的最新值
    setSortingOptions(initialSortRef.current);
  };
}

适用场景： #

比如父组件可能会动态传递不同的默认排序字段，但你希望重置时回到组件第一次挂载时的初始值，而不是当前props的最新值，这时候useRef就能派上用场。

总的来说，你的第一种方案是最通用、最值得推荐的。除非有特殊的动态初始状态需求，否则直接抽离初始常量就足够啦！

内容的提问来源于stack exchange，提问作者Roxy'Pro