使用钩子的全局React函数

Question

我有一个名为scheduleShortcut的函数，它在整个应用程序的几个地方使用。最初，这个函数是特定组件的局部函数，但由于它被多次使用，我想将这个函数重构为一个全局函数。

一开始，我试着做如下的事情:

const history = useHistory();
const dispatch = useDispatch();
export const scheduleShortcut = (jobId: number) => {
dispatch(jobGanttFocus(jobId));
dispatch(focusJobScheduleFilter(jobId));
dispatch(toggleScheduleView('jobs'));
history.push('/schedule');
};

然而，当我这样做时，我得到一个错误，说我不能使用useHistory或useDispatch，除非它们在React组件或自定义钩子内。然后，我尝试通过以下方式将schedule快捷方式转换为自定义钩子:

export const useScheduleShortcut = (jobId: number) => {
const history = useHistory();
const dispatch = useDispatch();
dispatch(jobGanttFocus(jobId));
dispatch(focusJobScheduleFilter(jobId));
dispatch(toggleScheduleView('jobs'));
history.push('/schedule');
};

这允许我使用useDispatch和useHistory。但是，当我尝试在需要它的特定组件中调用该函数时，会得到类似的错误。基本上，它说我不能在回调中使用我的自定义钩子(即useScheduleShortcut)。

<Roster
jobId={job.id}
assignWorkers={canAssignWorker ? handleAssignWorkers : undefined}
scheduleShortcut={() => useScheduleShortcut(jobId)}
/>

是否有一种方法可以绕过这些错误并使用schedule快捷方式作为可回收的功能?或者这实际上是不可能的，因为我正在使用钩子?

Answer 1

钩子实际上必须在顶层调用，你违反了这个规则

可以从钩子中公开(返回)一个函数，之后可以作为回调函数调用。

。

export const useScheduleShortcut = () => {
const history = useHistory()
const dispatch = useDispatch()
const dispatchScheduleShortcut = (jobId) => {
dispatch(jobGanttFocus(jobId))
dispatch(focusJobScheduleFilter(jobId))
dispatch(toggleScheduleView('jobs'))
history.push('/schedule')
}
return {
dispatchScheduleShortcut
}
};

，然后用作

const { dispatchScheduleShortcut } = useScheduleShortcut()
return (
<Roster
jobId={job.id}
assignWorkers={canAssignWorker ? handleAssignWorkers : undefined}
scheduleShortcut={() => dispatchScheduleShortcut(jobId)}
/>
)