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?
no puede usar useEffect en su gancho para ese propósito, intente esto:
gancho :
function useIsUserSubscribed() { const currentUserId = useSelector((state) => state.auth.user?.id); const checkUser = useCallback(async (publisherId, setUserIsSubscribed) => { if (!currentUserId || !publisherId) return; try { const res = await checkSubscription(publisherId); setUserIsSubscribed(true); } catch (err) { setUserIsSubscribed(false); } }, [currentUserId]); return {checkUser}; } export default useIsUserSubscribed;componente :
const SubscribeUnsubscribeBtn = ({profilePageUserId}) => { const [userIsSubscribed,setUserIsSubscribed]=useState(false); const { checkUser } = useIsUserSubscribed(); useEffect(()=>{ checkUser(profilePageUserId,setUserIsSubscribed) },[checkUser,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!!!!? checkUser(profilePageUserId,setUserIsSubscribed) } return ( <button type="button" className="sub-edit-unsub-btn bsc-button" onClick={onClick}> {userIsSubscribed ? 'Subscribed' : 'Unsubscribed'} </button> ); }también puede agregar algún estado de carga en su enlace y devolverlos también para que pueda verificar si el proceso ya se completó o no
Agregue una dependencia en useEffect de useIsUserSubscribed.
gancho :
function useIsUserSubscribed(publisherId) { const [userIsSubscribed, setUserIsSubscribed] = useState(null); const currentUserId = useSelector((state) => state.auth.user?.id); // add refresh dependece const refresh = useSelector((state) => state.auth.refresh); useEffect(() => { ... }, [publisherId, currentUserId, refresh]); ... }componente :
const onClick = async () => { ... // HOW CAN I RERENDER THE HOOK HERE!!!!? // when click, you can dispatch a refresh flag. dispatch(refreshSubState([])) }Exponga el método forceUpdate.
gancho :
function useIsUserSubscribed(publisherId) { const [update, setUpdate] = useState({}); const forceUpdate = () => { setUpdate({}); } return {userIsSubscribed, forceUpdate}; }componente :
const {userIsSubscribed, forceUpdate} = useIsUserSubscribed(profilePageUserId); const onClick = async () => { ... forceUpdate(); }Aquí hay otra solución del usuario @bitspook
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 gancho, 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.