He hecho 3 botones personalizados diferentes:
<TouchableOpacity onPress={selectClosed}> <Text>Closed</Text> </TouchableOpacity> <TouchableOpacity onPress={selectPending}> <Text>Pending</Text> </TouchableOpacity> <TouchableOpacity onPress={selectComplete}> <Text>Complete</Text> </TouchableOpacity>y sus funciones onPress:
const selectClosed = () => { getShiftDetails.bind(null, 'closed'); }; const selectPending = () => { getShiftDetails.bind(null, 'pending'); }; const selectComplete = () => { getShiftDetails.bind(null, 'complete'); };A continuación se muestra cómo estoy haciendo mi llamada api:
const getShiftDetails = useCallback( ( page = 1, limit = 20, mode: 'pending' | 'complete' | 'closed' = 'complete', ) => { const payload = { page, limit, status: [mode], }; ApiFunctions.post(apiUrl + '/shift', payload) .then( // other stuff ) .catch((err: any) => { // other stuff }); }, [user], ); De forma predeterminada, mi llamada a la API se realiza con el mode complete . Ahora, si hago clic en el botón pending , se debe realizar otra llamada api con el mode pending . Pero esto no está sucediendo. No estoy seguro de dónde me equivoqué.
Recomiendo usar customHooks. (Cuando se cambian las opciones, se vuelve a realizar la llamada).
const useFetch = (url, options) => { const [response, setResponse] = React.useState(null); React.useEffect(async() => { const res = await fetch(url, options); const json = await res.json(); setResponse(json); }, [options]); return response; };usar ganchos:
const payload = { page = 1, limit = 20, status: 'pending', }; const { response } = useFetch("url", payload)