React 自定义钩子方括号花括号

Question

重点是使用相同的自定义钩子来进行不同的API调用。

问题：

当我返回 {} 时，它起作用了。 当我返回 [] 时，它不会：

不进入ApiGetDogFactsComponent函数，渲染html元素，但不返回数据

注意：vscode 将 {} 内函数的返回值高亮显示为 any，而在 [] 内则为 JSX.Element。 注意：这里有一篇关于主题的类似帖子，但我无法理解其中的区别。

ApiCallPage.js

// Custom hook for API Facts
import { useApiGetFacts } from '../Hooks/useApiCalls';

export const SeventhPage = () => {
    const {ApiGetDogFactsComponent}  = useApiGetFacts("dog", "https://dog-api.kinduff.com/api/facts", "Dog");
    const {ApiGetCatFactsComponent}  = useApiGetFacts("cat", "https://catfact.ninja/fact", "Cat");

    return (<>
        ...
            {<ApiGetDogFactsComponent />}
            {<ApiGetCatFactsComponent />}
    </>)
}

使用ApiCalls.js

import { useQuery } from '@tanstack/react-query';

export const useApiGetFacts = (type, url, description) => {
    const {data, isLoading, isError, refetch, isRefetching} = useQuery([type], async () => {
        try { 
            const res = await fetch(url);
            const data = await res.json();
            return data;
        } catch (error) {
            throw error;
        }
    });

    const ApiGetCatFactsComponent = () => {
        if (isLoading || isRefetching) {
            return (<>
                <h1 style={{color: "white"}}>{"Loading ..."}</h1>
            </>)
        }

        if (isError) {
            return (<>
                <h1 style={{color: "white"}}>{"Error Processing ..."}</h1>
            </>)
        }

        return (<>
            <article>
                <h3>React Query</h3>
                <p>{data?.fact}</p>
                <button onClick={refetch}>{description} Fact</button>
            </article>
        </>)
    }

    const ApiGetDogFactsComponent = () => {
        ...samey...
        
        return (<>
            <article>
                <h3>React Query</h3>
                <p>{data.facts[0]}</p>
                <button onClick={refetch}>{description} Fact</button>
            </article>
        </>)
    }
    

    return {ApiGetCatFactsComponent, ApiGetDogFactsComponent};
} 

添加，这也有效。

const [{ApiGetCatFactsComponent}, {ApiGetDogFactsComponent}]  = 
                        [useApiGetFacts("cat", "https://catfact.ninja/fact", "Cat"), 
                        useApiGetFacts("dog", "https://dog-api.kinduff.com/api/facts", "Dog")];

澄清更新：

这行不通

SeventhPage.js

export const SeventhPage = () => {
...
    const [ApiGetDogFactsComponent]  = useApiGetFacts("dog", "https://dog-api.kinduff.com/api/facts", "Dog");
    const [ApiGetCatFactsComponent]  = useApiGetFacts("cat", "https://catfact.ninja/fact", "Cat");
...
}

使用ApiCalls.js

export const useApiGetFacts = (type, url, description) => {
(same code)
...
    return [ApiGetCatFactsComponent, ApiGetDogFactsComponent];
}

Answer 1

在这两行代码中：

const [ApiGetDogFactsComponent]  = useApiGetFacts("dog", "https://dog-api.kinduff.com/api/facts", "Dog");
const [ApiGetCatFactsComponent]  = useApiGetFacts("cat", "https://catfact.ninja/fact", "Cat");

您只选择返回数组的first元素：

return [ApiGetCatFactsComponent, ApiGetDogFactsComponent];

不管你给它们起什么名字，两个都是对

ApiGetCatFactsComponent

的引用。

基本上，您只是发现对象属性是named，数组元素是positional。如果原始/返回的名称很重要，请使用对象属性。

---

顺便说一句......如果你必须根据你传递给它的参数调用你的钩子两次，你可能会考虑不同的设计。也许是两个不同的挂钩，也许挂钩在内部知道 URL 并返回两个函数，也许是别的东西。根据您构建的内容很难判断。

但是，只要看看每次调用

useApiGetFacts

... 函数参数的所有三个 都在告诉它你想要“猫”还是“狗”。这是很多重复。

更进一步……钩子一开始就不应该真正返回组件。 Hooks 非常适合提供有用的辅助函数，维护这些函数的状态等。但这感觉就像是 hooks 和组件的不直观混合。

钩子和组件在结构上相似，但前者返回 data（或返回数据的函数），而后者返回 JSX.