如何重用自定义挂钩？

Question

我正在构建一个名册管理应用程序。我已经构建了一个使用

useRosterViewer hook

的花名册查看器。

源代码类似于：

let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
        case "init":
            result.roster = action.roster;
            result.isLoading = false;
            break;
        ........... 
        default:
            break;
    }
    return result;
}
export function useRosterViewer() {
    const [itemList, updateItemList] = useReducer(reducer, {
        error: null,
        isLoading: true,
        roster: null,
        ............
    });
    useEffect(() => {
        let getData = async () => {
            let now = new Date();
            let rosterYear = now.getFullYear();
            let rosterMonth = now.getMonth();
            let roster = await Roster(rosterYear, rosterMonth + 1);
            updateItemList({
                roster,
                systemParam,
                type: "init"
            }); 
        }
        getData();
    },[]);
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,
        .............
    }
}

我将建立一个花名册编辑器。 当我构建另一个钩子（例如 useRosterEditor）时，源代码类似于：

export function useRosterEditor(){
    const { error, isLoading, roster } = useRosterViewer();
    const [itemList, updateItemList] = useReducer(reducer, {
        error,
        isLoading,
        roster,
    });
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,     
    }
}

以下组件使用了useRosterEditor：

export default function RosterEditor(){
    console.log(useRosterEditor());
} 

如果我修改 useRosterEditor 如下：

export function useRosterEditor(){

    const [itemList, updateItemList] = useReducer(reducer, {
        error:null,
        isLoading:true,
        roster:null,
    });
    useEffect(()=>{
        let getData = async () => {
               const { error, isLoading, roster } = useRosterViewer();
         }
         getData();
        },[]) 
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,     
    }
}

反应提示如下错误：

React Hook“useRosterViewer”在函数“getData”中调用，该函数既不是 React 函数组件，也不是自定义 React Hook 函数。 React 组件名称必须以大写字母开头。 React Hook 名称必须以“use”一词开头

我使用 useRosterViewer 挂钩来获取名册数据以进行显示。它在名册查看组件中运行良好。在 RosterEditor 组件中，我需要获取名册和其他数据，因此我不想重复数据获取代码（即 useRosterViewer 挂钩的

getData

函数中的所有操作）。因此，我想知道 如何在 RosterEditor 组件中重用 useRosterViewer 钩子。

Answer 1

一般来说，Hooks 不能在 React 组件之外调用。 React 官方文档还指出，不能在常规 js 函数或 if 语句中调用 hooks。您可以在这里找到更多信息：Hooks 规则

您可以修改 useRosterEditor 如下：

    export function useRosterEditor(){

    const [itemList, updateItemList] = useReducer(reducer, {
        error:null,
        isLoading:true,
        roster:null,
    });
    const { error, isLoading, roster } = useRosterViewer();
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,     
    }
}