Tengo una función que declaré en un archivo, como esta
export default function doSomething (param1, param2, param3) { *Do something here* }Y luego quiero usar esa función cada vez que presiono un botón en una pantalla que he declarado en otro archivo:
import doSomething from '../../doSomething'; export default function Screen(props) { return ( <Container> <SafeAreaProvider> <Button onPress={() => doSomething(1, 2, 3)} /> </SafeAreaProvider> </Container> ); } Sin embargo, cada vez que presiono el botón, aparece una Invalid hook call. Hooks can only be called inside of the body of a function component . Soy bastante nuevo en ganchos personalizados/funciones externas, entonces, ¿cómo puedo resolverlo?
Si doSomething es un enlace y no una función simple de JS, entonces no puede simplemente importarlo y llamarlo como lo haría con funciones simples.
El siguiente código soluciona el problema.
export default function useDoSomething() { ... const doSomething = React.useCallback((parameter1, parameter2, parameter3) => {}, []) return { doSomething, } }Luego use el gancho de la siguiente manera.
const { doSomething } = useDoSomething() return ( <Container> <SafeAreaProvider> <Button onPress={() => doSomething(1, 2, 3)} /> </SafeAreaProvider> </Container> );