在 React 中，根据初始获取的结果获取数据

Question

我们编写了一个自定义数据获取钩子useInternalApi，它类似于useDataApi 最底部的fairly decent tutorial 钩子，用于使用 React 钩子获取数据。我们的应用会获取大量体育数据，特别是，我们正在尝试为我们的用例找出正确的数据获取模式，这非常简单：

• 获取特定实体的一般信息（例如 NCAA 会议）
• 使用随该实体返回的信息（特定会议中团队的团队 ID 数组），并获取数组中每个团队的信息。

为此，我们的代码将如下所示：

import `useInternalApi` from '../path-to-hooks/useInternalApi';
// import React... and other stuff

function ComponentThatWantsTeamInfo({ conferenceId }) {
    // use data fetching hook
    const [conferenceInfo, isLoading1, isError1] = useInternalApi('conferenceInfo', { conferenceId: conferenceId })

    // once conferenceInfo loads, then load info from all teams in the conference
    if (conferenceInfo && conferenceInfo.teamsArray) {
        const [teamInfos, isLoading2, isError2] = useInternalApi('teamInfo', { teamIds: conferenceInfo.teamIds })
    }
}

在上面的例子中，conferenceId 是一个整数，teamIds 是一个整数数组，useInternalApi 函数的两个参数的组合创建了一个唯一的端点 url 来从中获取数据。目前存在的两个主要问题是：

1. 我们的 useInternalApi 钩子在 if 语句中被调用，这在 #1 钩子规则中是不允许的。
2. useInternalApi 当前构建为仅对特定端点进行一次提取。目前，它无法处理上述的一组 teamId。

什么是正确的数据获取模式？理想情况下，teamInfos 将是一个对象，其中每个键都是会议中一个团队的teamId。特别是，是否更好：

1. 创建一个新的内部挂钩，它可以处理一个团队 ID 数组，将进行 10 到 20 次提取（或根据teamsArray 的长度所需的次数），并将使用 Promise.all() 返回综合结果。
2. 保持 useInternalApi 挂钩不变，只需调用它 10 到 20 次，每个团队一次。

编辑

我不确定是否需要 useInternalApi 的底层代码来回答这个问题。我尽量避免创建很长的帖子，但在这种情况下，代码可能很重要：

const useInternalApi = (endpoint, config) => {
    // Set Data-Fetching State
    const [data, setData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [isError, setIsError] = useState(false);

    // Use in lieu of useEffect
    useDeepCompareEffect(() => {
        // Token/Source should be created before "fetchData"
        let source = axios.CancelToken.source();
        let isMounted = true;

        // Create Function that makes Axios requests
        const fetchData = async () => {
            // Set States + Try To Fetch
            setIsError(false);
            setIsLoading(true);
            try {
                const url = createUrl(endpoint, config);
                const result = await axios.get(url, { cancelToken: source.token });
                if (isMounted) {
                    setData(result.data);
                }
            } catch (error) {
                if (isMounted) {
                    setIsError(true);
                }
            } finally {
                if (isMounted) {
                    setIsLoading(false);
                }
            }
        };

        // Call Function
        fetchData();

        // Cancel Request / Prevent State Updates (Memory Leaks) in cleanup function
        return () => {
            isMounted = false; // set to false to prevent state updates / memory leaks
            source.cancel(); // and cancel the http request as well because why not
        };
    }, [endpoint, config]);

    // Return as length-3 array
    return [data, isLoading, isError];
};

Answer 1

在我看来，如果你需要有条件地使用钩子，你应该在一个单独的组件中使用那个钩子，然后有条件地渲染那个组件。

我的理解，如果我错了，请纠正我，是初始 API 调用返回一个 id 数组，您需要根据该 id 获取每个团队的数据吗？

我会这样做。

import `useInternalApi` from '../path-to-hooks/useInternalApi';
// import React... and other stuff

function ComponentThatDisplaysASpecificTeam(props){
    const teamId = props.teamId;
    const [teamInfo] = useInternalApi('teamInfo', { teamId });

    if(! teamInfo){
        return <p>Loading...</p>
    }

    return <p>do something with teamInfo...</p>

}

function ComponentThatWantsTeamInfo({ conferenceId }) {
    // use data fetching hook
    const [conferenceInfo, isLoading1, isError1] = useInternalApi('conferenceInfo', { conferenceId: conferenceId })

    if (! conferenceInfo || ! conferenceInfo.teamsArray) {
        return <p>this is either a loading or an error, you probably know better than me.</p>
    }

    // Let the data for each team be handled by its own component. This also lets you not have to use Promise.all
    return (
        <div>
            {conferenceInfo.teamIds.map(teamId => ( 
                <ComponentThatDisplaysASpecificTeam teamId={teamId} />
            ))}
        </div>
    )

}