时间戳

首页 > 解决方案 > React Recoil 状态未正确重置

javascript - React Recoil 状态未正确重置

问题描述

我有一些反冲状态，我想重置。

import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
...
  //should be used for flushing the global recoil state, whenever a user submits an invoice
  const resetLabelInvoiceState = useResetRecoilState(labelInvoiceState);
  const resetMetaDataState = useResetRecoilState(metadataState);
  const resetGlobalAnnotationsState = useResetRecoilState(globalAnnotationState)

我已经完成了功能，我想像这样重置所有状态。我都尝试过使用和不使用重置功能。

const flushRecoilState = () =>{
     console.log('flushed state')
     return(
    resetLabelInvoiceState(),
    resetMetaDataState(),
    resetGlobalAnnotationsState()
     )
   }

...
        flushRecoilState()
        return history.push('/historyinvoices')
...

当我检查状态时，它没有被重置。是因为库中的“useResetRecoilState”不能正常工作，没有正确实现，还是有其他问题。

我可以只使用常规useRecoilState钩子，并将状态设置回默认值。

有人知道为什么会这样吗？

标签： javascriptreactjsrecoiljs

解决方案

我今天也遇到了同样的问题，原来是我自己的错。只是把它放在这里以供将来参考。

我的问题是我更改了选择器中的 set 方法，如果您自定义了 set 方法，则需要检查传入的值是否为DefaultValue.

const targetYear = selector({
  key: 'targetYear',
  get: ({get}) => get(targetYearAtom),
  set: ({set, get}, method) => {
    const currentTargetYear = get(targetYearAtom);
    switch(method) {
      case 'prevYear':
        set(targetYearAtom, currentTargetYear - 1);
        return;
      case 'nextYear':
        set(targetYearAtom, currentTargetYear + 1);
        return;
      default:
        if (method instanceof DefaultValue) {
          set(targetYearAtom, method);
        }
        return;
    }
  },
})

推荐阅读