调用从另一个文件导入的 function

Question

I have a function that I declared on a file, like this

export default function doSomething (param1, param2, param3) {
 *Do something here*
}

And then I want to use that function whenever I press a button on a screen I have declared in another file:

import doSomething from '../../doSomething';

export default function Screen(props) {
 return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => doSomething(1, 2, 3)} />
      </SafeAreaProvider>
   </Container>
 );
}

However, any time I press the button, it gives me a Invalid hook call. Hooks can only be called inside of the body of a function component Invalid hook call. Hooks can only be called inside of the body of a function component error. I'm fairly new to custom hooks/external functions, so how can I resolve is?

Answer 1

If doSomething is a hook and not a plain JS function, then you can not just import it and call it as you would do with plain functions.

The following code fixes the issue.

export default function useDoSomething() {

   ...

  const doSomething = React.useCallback((parameter1, parameter2, parameter3) => {}, [])
  return {
    doSomething,
  }
}

Then use the hook as follows.

const { doSomething } = useDoSomething()

return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => doSomething(1, 2, 3)} />
      </SafeAreaProvider>
   </Container>
);