Obtuve un componente React que está tratando de obtener algunos datos y está llamando a una llamada onSuccess(result) cuando se recuperan los datos con éxito.

Necesito guardar los datos en redux. useDispatch ganchos personalizados que usan useDispatch , y estoy tratando de hacer algo como esto:

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

pero recibo un error porque no se puede llamar a un enlace dentro de una devolución de llamada.

Sé que los ganchos solo se pueden llamar al nivel superior de un componente funcional. Entonces, ¿cómo puedo lograr lo que necesito?

El gancho personalizado:

  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)); } 

El componente padre podría pasar al despachador para useSaveData siguiente manera.

  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)); } 

Y el componente padre se vuelve;

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

Su enlace personalizado debe devolver una función que se puede pasar como devolución de llamada.

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

En tu componente.

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

Edite después de ver su gancho personalizado.

No necesita crear un gancho personalizado aquí. simplemente puede pasar el despacho a su devolución de llamada.

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

crear la función 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)); }