使用useResetRecoilState重置Recoil状态为默认值不生效问题咨询

问题根因 #

你违反了React Hook的调用规则：useResetRecoilState 属于React Hook，只能在React组件顶层或自定义Hook内部调用，不能包裹在普通的自定义函数filterReset中执行。
useResetRecoilState 调用后会返回一个可执行的重置方法，你需要先在组件顶层调用Hook拿到这个重置方法，再在登出回调中执行该方法即可。

修正后的代码 #

组件逻辑代码

import {filter} from '../appl/recoil/atoms';
import { useResetRecoilState } from 'recoil';

// 组件顶层直接调用Hook，获取重置函数
const resetFilter = useResetRecoilState(filter);

const onSignOut = () => { 
  /* 登出及其他业务逻辑 */
  resetFilter(); // 调用重置函数完成状态重置
} 

补充：原子定义修正

你提供的原子定义代码末尾遗漏了闭合括号，也可能引发异常，修正后如下：

import { atom } from 'recoil';
export const filter = atom({
  key: 'filter',
  default: {
    handlers: [],
    product: '',
    origin: '',
    destination: ''
  }
});

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