कैसे करने के लिए फिर से प्रस्तुत करना एक कस्टम हुक के बाद प्रारंभिक प्रस्तुत करना

आप का उपयोग नहीं कर सकते useEffect में अपने हुक है कि उद्देश्य के लिए इस प्रयास करें :

हुक :

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;

घटक :

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>
  );
} 

आप भी जोड़ सकते हैं कुछ लोड हो रहा है राज्य में अपने हुक और उन्हें वापस भी तो आप जाँच कर सकते हैं अगर प्रक्रिया पहले से ही किया है या नहीं

जोड़ें एक dependece पर useIsUserSubscribed के useEffect.

हुक :

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]);
    ...
}

घटक :

const onClick = async () => {
    ...
    // HOW CAN I RERENDER THE HOOK HERE!!!!?
    // when click, you can dispatch a refresh flag.
    dispatch(refreshSubState([]))
}

बेनकाब forceUpdate metheod.

हुक :

function useIsUserSubscribed(publisherId) {
    const [update, setUpdate] = useState({});
    const forceUpdate = () => {
        setUpdate({});
    }  

    return {userIsSubscribed, forceUpdate};
}

घटक :

const {userIsSubscribed, forceUpdate} = useIsUserSubscribed(profilePageUserId);

const onClick = async () => {
    ...
    forceUpdate();
}

यहाँ है एक और समाधान के द्वारा उपयोगकर्ता @bitspook

SubscribeUnsubscribeBtn पर निर्भरता useIsUserSubscribedहै , लेकिन useIsUserSubscribed पर निर्भर नहीं है कुछ भी से SubscribeUnsubscribeBtn. इसके बजाय, useIsUserSubscribed है ध्यान में रखते हुए एक स्थानीय, राज्य. आप एक विकल्प के यहाँ:

1. ले जाने के बारे में राज्य whetehr उपयोगकर्ता की सदस्यता ली है या नहीं एक स्तर के बाद से, आप का उपयोग कर रहे हैं Redux, शायद Redux.
2. संवाद करने के लिए useIsUserSubscribed आप की जरूरत है कि बदलने के लिए अपने आंतरिक राज्य है ।

के लिए 1)

  const [userIsSubscribed, setUserIsSubscribed] = useState(null);

स्थानांतरित करने के लिए इस राज्य Redux की दुकान और उपयोग के साथ यह useSelector.

के लिए 2)लौटने के लिए , एक सरणी के मूल्य और कॉलबैक हुक से, के बजाय सिर्फ मूल्य. यह अनुमति देगा करने के लिए आप से संवाद घटक में वापस हुक ।

में useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

फिर में onClick, आप कॉल कर सकते हैं setUserIsSubscribed(false)बदल रहा है , हुक की आंतरिक स्थिति, और फिर से प्रतिपादन अपने घटक है ।