什么都没有改变时反冲更新状态

Question

因此，我最近开始使用 useRecoilStateLoadable 通过反冲来使用我的 API 端点，它工作得很好，但我遇到的一个问题是在我的数据表上，我希望它在用户选择例如第 2 页或搜索某些内容时执行另一个 API 调用，目前这是我的原子和选择器的样子：

const entriesPerPage : EntriesPerPage = {defaultValue: 10};

export const filterScorecard = atom<ScorecardSearchRequest>({
    key: 'filterScorecard',
    default: {
        Draw: 2,
        PageNumber: 1,
        PageSize: entriesPerPage.defaultValue!,
        SortColumnNames: [],
        SortDirections: [],
        SearchValue: '',
        ConsolidationValues: null,
        IsGroupDataManagement: false,
        OnlySearchLockedScorecards: null,
        ScorecardEndDate: null,
        ScorecardTypes: ["43"],
        Usernames: null,
    }
})

export const allScorecardSelector = selector<ScorecardLicense>({
    key: 'allScorecardSelector',
    get: async ({get}) => {
        
        const filterScorecardData = get(filterScorecard);
        console.log(filterScorecard)
        try{
            const scorecardSearchResult = await BEEScorecardService.getUserScorecards(filterScorecardData);
            return scorecardSearchResult.data;
        }catch (error){
            console.error(error);
            return defaultObject;
        }
    }
})

export const allScorecardAtom = atom<ScorecardLicense>({
    key: 'allScorecardAtom',
    default: allScorecardSelector
})

我创建了 filterScorecard 方法来在状态更改时重新触发我的 API，在我的组件中，在 useEffect 中我的代码如下所示：

    const [entriesPerPage, setEntriesPerPage] = useState<EntriesPerPage>({ defaultValue: 10 });

    const [pageNumber, setPageNumber] = useState<number>(1);
    const [searchValue, setSearchValue] = useState<string>('');
    const [sortColumnNames, setSortColumnNames] = useState<string[]>([]);
    const [sortDirections, setSortDirections] = useState<SortDirections[]>([]);
    useEffect(() => {
            setFilterScorecard(prevState => ({
                ...prevState,
                pageNumber,
                entriesPerPage,
                searchValue,
                sortColumnNames,
                sortDirections
            }))
        }, [entriesPerPage, pageNumber, searchValue, sortColumnNames, sortDirections]);

但我注意到的是，每次我离开并返回时，API 都会在不应该被触发时被触发，如果我删除使用效果并导航离开并返回，则 API 不会加载并且它显示正确数据，但我无法搜索或转到下一页，因为当然不再调用 filterScorecard 方法。我想弄清楚我需要做什么，以便在状态没有任何变化的情况下不执行 API 调用。

更新

我已经创建了一个代码沙盒来向您展示问题，如果您单击“about”，它会触发 API，但如果您单击“home”，然后再次单击“about”，它仍然会触发 API 请求，这不应该是因为状态没有任何变化。仅当我单击下一页时，它才真正再次调用 API

Code Sandbox

Answer 1

每次导航到组件时都会发送 API 请求的原因是异步选择器依赖项在每次安装组件时都会发生变化。

如果任何依赖项发生变化，选择器将被重新评估并执行新的查询。

https://recoiljs.org/docs/guides/asynchronous-data-queries#asynchronous-example

什么是选择器的依赖？

const selector = selector({
  key: "getAllSelector",
  get: async ({ get }) => {
    const filterScorecardData = get(filterScorecard);  <-- this is a dependency

    const res = await fetch(`https://my-api`);
  }
});

每次安装组件时，都会更新 filterScorecard 状态。

...
useEffect(() => {
  setFilterScorecard(prevState => ({
    ...prevState,
    pageNumber,
    etc.,
  }));

因为您正在更新每个组件安装的依赖状态， allScorecardSelector 选择器将在每个组件安装时重新评估和执行。

为了防止 API 请求在组件挂载时触发，您需要避免在每个组件挂载时更新 filterScorecard 状态。