Tengo un enlace personalizado llamado useIsUserSubscribed que verifica si un usuario específico está suscrito. Devuelve verdadero si el usuario está suscrito y falso si el usuario no está suscrito...
import { useState, useEffect } from "react"; import { useSelector } from "react-redux"; import { checkSubscription } from "../services"; // this hook checks if the current user is subscribed to a particular user(publisherId) function useIsUserSubscribed(publisherId) { const [userIsSubscribed, setUserIsSubscribed] = useState(null); const currentUserId = useSelector((state) => state.auth.user?.id); useEffect(() => { if (!currentUserId || !publisherId) return; async function fetchCheckSubscriptionData() { try { const res = await checkSubscription(publisherId); setUserIsSubscribed(true); } catch (err) { setUserIsSubscribed(false); } } fetchCheckSubscriptionData(); }, [publisherId, currentUserId]); return userIsSubscribed; } export default useIsUserSubscribed; ... Tengo un botón que usa este gancho que representa el texto condicionalmente en función del valor booleano devuelto por useIsUserSubscribed ...
import React, { useEffect, useState } from "react"; import { add, remove } from "../../services"; import useIsUserSubscribed from "../../hooks/useIsUserSubscribed"; const SubscribeUnsubscribeBtn = ({profilePageUserId}) => { const userIsSubscribed = useIsUserSubscribed(profilePageUserId); const onClick = async () => { if (userIsSubscribed) { // this is an API Call to the backend await removeSubscription(profilePageUserId); } else { // this is an API Call to the backend await addSubscription(profilePageUserId); } // HOW CAN I RERENDER THE HOOK HERE!!!!? } return ( <button type="button" className="sub-edit-unsub-btn bsc-button" onClick={onClick}> {userIsSubscribed ? 'Subscribed' : 'Unsubscribed'} </button> ); } Después de hacer clic, me gustaría volver a representar mi useIsUserSubscribed onClick que el texto de mi botón cambie. Se puede hacer esto? ¿Debería usar un enfoque diferente?
SubscribeUnsubscribeBtn depende de useIsUserSubscribed , pero useIsUserSubscribed no depende de nada de SubscribeUnsubscribeBtn . En cambio, useIsUserSubscribed mantiene un estado local. Tienes un par de opciones aquí:
useIsUserSubscribed que necesita cambiar su estado interno. para 1)
const [userIsSubscribed, setUserIsSubscribed] = useState(null);mueva este estado a la tienda Redux y utilícelo con useSelector.
Para 2) , devuelva una matriz de valor y una devolución de llamada desde el enlace, en lugar de solo el valor. Le permitirá comunicarse desde el componente de vuelta al gancho.
En useIsUserSubscribed ,
return [userIsSubscribed, setUserIsSubscribed]; Luego, en onClick , puede llamar a setUserIsSubscribed(false) , cambiar el estado interno del enlace y volver a representar su componente.