我有一個被稱為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 組件或自定義鉤子中。然后，我嘗試通過以下方式將 scheduleShortcut 轉換為自定義鉤子：
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)}
/>
有沒有辦法解決這些錯誤并將 scheduleShortcut 用作可回收功能？或者這實際上是不可能的，因為我使用的是鉤子？
uj5u.com熱心網友回復：
實際上必須在頂層呼叫 Hooks，您違反了該規則
您可以從鉤子中公開（回傳）一個函式，之后可以將其作為回呼呼叫。
IE
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)}
/>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/337245.html
標籤：javascript 反应 功能 反应钩子
上一篇：從反應函式回傳陣列我哪里出錯了