在外部 API 服务层中使用 React 钩子

Question

我正在为电子商务网站构建一个 React 应用程序。 我有一个产品搜索页面。我正在使用 SWR 库（useSWR 挂钩），因为我喜欢它的缓存能力。但是，由于它使用钩子，我似乎无法将此调用放在我的函数组件之外。 理想情况下，我想将所有 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 遇到了“你违反了钩子规则”的错误：

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用 功能组件。

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

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

Answer 1

您应该创建一个使用 useSWR 来获取数据的自定义挂钩。 React 将允许创建一个自定义钩子，其中包含使用的其他钩子。是这样的：

export function useProductSearchResults(keywords) {

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

    const { data } = useSWR(url);

    return data;
}

然后在你的代码中使用这个自定义钩子：

.
.
 let { keywords } = useParams();

    const results = useProductSearchResults(keywords);

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