reactjs - 在外部 API 服务层使用 React hooks

Question

我正在为电子商务网站构建一个 React 应用程序。 我有一个产品搜索页面。我正在使用 SWR 库(useSWR hook)，因为我喜欢它的缓存能力。但是，由于它使用了钩子(Hook)，所以我似乎无法将此调用放在我的函数组件之外。 理想情况下，我想将所有 API 功能分割成一个单独的库/服务层。

让我用一些极其精简的代码来演示我正在尝试做什么:

import React, { useState } from 'react';
import { useParams } from "react-router";
import * as ProductAPI from 'common/libs/ProductAPI';

function ProductSearch() {

    const [searchResults, setSearchResults] = useState(null);

    let { keywords } = useParams();

    const results = ProductAPI.getProductSearchResults(keywords);

    if (searchResults != results)
        setSearchResults(results);

    function renderSearchResults() {
        ...
    }

    return (
        <>
            {renderSearchResults()}
        </>
    );
}

export default ProductSearch;

和 API 库:

import useSWR from 'swr';

var productSearchURL = process.env.REACT_APP_API_ENDPOINT + '/product/search';

export function getProductSearchResults(keywords) {

    let url = productSearchURL;
    url += "/" + encodeURI(keywords);

    const { data } = useSWR(url);

    return data;
}

现在，React 遇到了“你违反了钩子(Hook)规则”的错误:

Invalid hook call. Hooks can only be called inside of the body of a function component.

我一直在努力寻找一种解决方案，让我能够将 API 功能抽象化到它自己的函数/组件中。

如果使用我当前的方法无法解决此问题，那么实现这种 API 实现分层方法的最佳方法是什么？

Answer 1

您应该创建一个使用 useSWR 来获取数据的自定义 Hook 。 React 将允许使用其中使用的其他钩子(Hook)创建自定义钩子(Hook)。像这样的东西:

export function useProductSearchResults(keywords) {

    let url = productSearchURL;
    url += "/" + encodeURI(keywords);

    const { data } = useSWR(url);

    return data;
}

然后在您的代码中使用这个自定义钩子(Hook):

.
.
 let { keywords } = useParams();

    const results = useProductSearchResults(keywords);

    if (searchResults != results)
        setSearchResults(results);
.
.
.