Ako opätovne poskytnúť vlastný háčik [duplicitné]

0

Otázka

Mám vlastný háčik s názvom useIsUserSubscribed ktorý kontroluje konkrétneho používateľa je vyžiadané. To vracia true (pravda), ak je používateľ prihlásený a false ak používateľ nie je vyžiadané...

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;

...Mám tlačidlo pomocou tohto háčika, ktorý vykresľuje text podmienečne založené na logických vrátil z 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>
  );
} 

Po onClick Rád by som, aby moja rerender useIsUserSubscribed háčik Tak, že môj text tlačidla prepína. Môže to byť vykonané? Mal by som použiť iný prístup?

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

Najlepšiu odpoveď

1

SubscribeUnsubscribeBtn závislosť na useIsUserSubscribed,, ale useIsUserSubscribed nebudete závislí na čokoľvek od SubscribeUnsubscribeBtn. Namiesto toho, useIsUserSubscribed je vedenie miestnej štátnej. Máte pár možností, tu:

  1. Presuňte štátu týkajúce sa whetehr užívateľ je vyžiadané alebo nie jednu úroveň vyššie, pretože používate Redux, možno v Redux.
  2. Oznámiť useIsUserSubscribed ktoré potrebujete, ak chcete zmeniť jeho vnútorného stavu.

Pre 1)

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

presunúť tento štát Redux uchovávajte a používajte s useSelector.

Pre 2), vráti pole hodnôt a žiadosť o spätný hovor z háčika, namiesto toho, aby len hodnoty. To vám umožní komunikovať z komponentu späť do háčika.

V useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Potom v onClickmôžete hovor setUserIsSubscribed(false)zmena háčik je vnútorný stav, a re-rendering komponentu.

2021-11-24 03:58:26

Pretože to bol označený ako duplicitný, nevadí vám uvedenie vašej odpovede tu? stackoverflow.com/questions/70090096/... To pomôže veľa ľudí. Postarám sa, aby ste si upvote.
Simone Anthony

Vyzerá to, ktoré ste uverejnili odpoveď na inú otázku. Takže predpokladám, že som si len nechať to tu.
bitspook

V iných jazykoch

Táto stránka je v iných jazykoch

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