Soy bastante nuevo en los ganchos personalizados dentro de los eventos en reaccionar nativo. Estoy desarrollando una aplicación y necesito llamar a una función que está definida en otro archivo:
Este es el archivo desde donde defino la función, 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); } })); } Luego, trato de usar la función en mi 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> ); } Sin embargo, cuando presiono el botón, recibo una Invalid hook call. Hooks can only be called inside of the body of a function component . Sé que, debido a cómo funcionan los Hooks, no se pueden llamar desde los controladores de eventos, entonces, ¿cómo puedo resolver esto?
Vuelva a trabajar en el enlace personalizado para que lo llame durante el renderizado y devuelva una función que se llamará cuando se presione:
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; }Usado como:
export default function Screen(props) { const markAsRejected = useMarkUserAsRejectedOnEvent(); return ( <Container> <SafeAreaProvider> <Button onPress={() => markAsRejected(eventID, assistants, interested, rejected, userID)} /> </SafeAreaProvider> </Container> ); }