Call custom hook from onPress-CodePudding

I'm fairly new to custom hooks inside events in react native. I'm developing an app and I need to call a function that's defined on another file:

This is the file from where I define the function, useMarkUserAsRejectedOnEvent.js

import { useDispatch } from 'react-redux';
import { updateEvent,
  getAssistedEvents,
  getAllEvents,
  getPreferencesEvents } from '../../../redux/actions/Events';
import { sendProgressPush } from '../../../redux/actions/Notification';

export default function useMarkUserAsRejectedOnEvent(eventID, assistants, interested, rejected, userID) {
  const dispatch = useDispatch();
  const newRejected = [...rejected, { rejectedId: userID }];
  let newAssistants = assistants;
  let newInterested = rejected;

  const userIsAssistant = assistants.some(element => element.assistantsId === userID);
  const userIsInterested = interested.some(element => element.interestedId === userID);

  if (userIsAssistant) {
    newAssistants = assistants.filter(element => element.assistantId === userID);
  }

  if (userIsInterested) {
    newInterested = interested.filter(element => element.rejectedId === userID);
  }

  dispatch(updateEvent(eventID, {
    assistants: newAssistants,
    interested: newInterested,
    rejected: newRejected
  }, status => {
    if (status) {
      getPreferencesEvents();
      getAllEvents();
      getAssistedEvents();
      sendProgressPush(eventID);
    }
  }));
}

Then, I try to use the function on my Screen.js

import useMarkUserAsRejectedOnEvent from '../../hooks/assistance/useMarkUserAsRejectedOnEvent';

export default function Screen(props) {
 return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => useMarkUserAsRejectedOnEvent(eventID, assistants, interested, rejected, userID)} />
      </SafeAreaProvider>
   </Container>
 );
}

However, when I press the button, I get a Invalid hook call. Hooks can only be called inside of the body of a function component error. I know that, because of how Hooks work, they cannot be called from event handlers, so how can I resolve this?

CodePudding user response：

Rework the custom hook so that you call it during rendering, and it returns a function to be called when the press happens:

export default function useMarkUserAsRejectedOnEvent() {
  const dispatch = useDispatch();

  const markAsRejected = useCallback((eventID, assistants, interested, rejected, userID) => {
    const newRejected = [...rejected, { rejectedId: userID }];
    let newAssistants = assistants;
    let newInterested = rejected;

    const userIsAssistant = assistants.some(element => element.assistantsId === userID);
    const userIsInterested = interested.some(element => element.interestedId === userID);

    if (userIsAssistant) {
      newAssistants = assistants.filter(element => element.assistantId === userID);
    }

    if (userIsInterested) {
      newInterested = interested.filter(element => element.rejectedId === userID);
    }

    dispatch(updateEvent(eventID, {
      assistants: newAssistants,
      interested: newInterested,
      rejected: newRejected
    }, status => {
      if (status) {
        getPreferencesEvents();
        getAllEvents();
        getAssistedEvents();
        sendProgressPush(eventID);
      }
    }));
  }, [dispatch]);

  return markAsRejected;
}

Used like:

export default function Screen(props) {
 const markAsRejected = useMarkUserAsRejectedOnEvent();
 return (
   <Container>
      <SafeAreaProvider>
        <Button onPress={() => markAsRejected(eventID, assistants, interested, rejected, userID)} />
      </SafeAreaProvider>
   </Container>
 );
}