कैसे करने के लिए फिर से प्रस्तुत करना एक कस्टम हुक [नकल]

0

सवाल

मैं कस्टम हुक नाम useIsUserSubscribed जाँच करता है कि देखने के लिए एक विशिष्ट उपयोगकर्ता की सदस्यता ली है. यह सच रिटर्न अगर उपयोगकर्ता की सदस्यता ली है और यह गलत नहीं है उपयोगकर्ता की सदस्यता ली...

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;

...मैं एक बटन का उपयोग कर इस हुक है कि renders पाठ सशर्त आधार पर बूलियन से लौटे 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>
  );
} 

के बाद onClick मैं करने के लिए चाहते rerender मेरे useIsUserSubscribed हुक इतना है कि मेरे बटन पाठ टॉगल करता है । कर सकते हैं यह किया जा सकता है? मैं का उपयोग करना चाहिए एक अलग दृष्टिकोण?

javascript react-hooks reactjs
2021-11-24 03:45:44
1

सबसे अच्छा जवाब

1

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)बदल रहा है , हुक की आंतरिक स्थिति, और फिर से प्रतिपादन अपने घटक है ।

2021-11-24 03:58:26

इस के बाद से चिह्नित किया गया था के रूप में एक डुप्लिकेट, आप मन में डाल अपने जवाब यहाँ? stackoverflow.com/questions/70090096/... यह बहुत से लोगों की मदद. मैं यह सुनिश्चित करूंगा कि तुम्हें देने के लिए एक upvote.
Simone Anthony

आप की तरह लग रहा है पोस्ट पर जवाब अन्य प्रश्न. तो मुझे लगता है कि मैं सिर्फ यह छोड़ दो, यहाँ.
bitspook

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में