Я получил компонент React, который пытается получить некоторые данные и вызывает onSuccess(result) обратного вызова при успешном извлечении данных.

Мне нужно сохранить данные в редуксе. Я создал пользовательские хуки, которые используют useDispatch , и я пытаюсь сделать что-то вроде этого:

 {amp}lt;MyComponent onSuccess = {res ={amp}gt; myCustomHook(res)} /{amp}gt; 

но я получаю сообщение об ошибке, потому что внутри функции обратного вызова нельзя вызывать хук.

Я знаю, что хуки можно вызывать только на верхнем уровне функционального компонента. Так как же мне добиться того, что мне нужно?

Пользовательский крючок:

  export function useSaveData(type, response) { if(!type|| !response) { throw new Error("got wrong parameters for useSaveData"); } let obj= { myData1: response.data1, myData2: response.data2 }; sessionStorage.setItem(type, JSON.stringify(obj)); const dispatch = useDispatch(); dispatch(actionCreator.addAction(type, obj)); } 

Родительский компонент может передать диспетчеру useSaveData следующим образом.

  export const useSaveData = (dispatch) ={amp}gt; (type, response) ={amp}gt; { if(!type|| !response) { throw new Error("got wrong parameters for useSaveData"); } let obj= { myData1: response.data1, myData2: response.data2 }; sessionStorage.setItem(type, JSON.stringify(obj)); dispatch(actionCreator.addAction(type, obj)); } 

И родительский компонент становится;

 function ParentComponent() { const dispatch = useDispatch(); const myCustomHook = useSaveData(dispatch); return {amp}lt;MyComponent onSuccess = {res ={amp}gt; myCustomHook(ACTION_TYPE, res)} /{amp}gt; } 

Ваш пользовательский хук должен возвращать функцию, которую можно передать как обратный вызов.

 useMyCustomHook = () ={amp}gt; { // your hook const onSuccess = () ={amp}gt; { // save data here } return { onSuccess }; } 

В твоем компоненте.

 function MyComponent(props) { const { onSuccess } = useMyCustomHook(); // your component code, you have onSuccess which can be bind with button or form as per your requirement. } 

Отредактируйте, увидев свой пользовательский хук

Вам не нужно создавать пользовательский хук здесь. Вы можете просто передать отправку вашему обратному вызову.

 const dispatch = useDispatch() {amp}lt;MyComponent onSuccess={res ={amp}gt; onSuccess(res, dispatch)} /{amp}gt; 

создать функцию onSucces.

 export function onSuccess(type, response, dispatch) { if(!type|| !response) { throw new Error("got wrong parameters for useSaveData"); } let obj= { myData1: response.data1, myData2: response.data2 }; sessionStorage.setItem(type, JSON.stringify(obj)); dispatch(actionCreator.addAction(type, obj)); }