Jak re-render vlastní hák [duplicitní]

Question 1

Mám vlastní háček jménem useIsUserSubscribed že zkontroluje konkrétní uživatel je přihlášen. To vrací true, pokud uživatel je přihlášen, a false, pokud uživatel není objednané...

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čítko pomocí tohoto háku, které činí text podmíněně na základě booleovské 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 bych, aby se překreslil můj useIsUserSubscribed hák Tak, že můj text tlačítka přepíná. Může to být provedeno? Mám použít jiný postup?

Question 2

SubscribeUnsubscribeBtn má závislost na useIsUserSubscribed, ale useIsUserSubscribed nespoléhej se na nic z SubscribeUnsubscribeBtn. Místo toho, useIsUserSubscribed je udržet místní státu. Máte několik možností zde:

Tah státu, pokud jde whetehr uživatel je přihlášen nebo ne jeden, o úroveň výš, protože používáte Redux, možná v Redux.
Komunikovat se useIsUserSubscribed že budete muset změnit svůj vnitřní stav.

Pro 1)

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

tah tohoto státu Redux store a používat jej s useSelector.

Pro 2), vrátí pole hodnota a zpětné volání z háku, místo toho jen hodnotu. To vám umožní komunikovat ze složky zpět do háku.

V useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Pak v onClick, můžete volat setUserIsSubscribed(false), měnící háček je vnitřní stav, a re-vykreslování komponenty.

bitspook · Answer 1 · 2021-11-24T03:58:26

SubscribeUnsubscribeBtn má závislost na useIsUserSubscribed, ale useIsUserSubscribed nespoléhej se na nic z SubscribeUnsubscribeBtn. Místo toho, useIsUserSubscribed je udržet místní státu. Máte několik možností zde:

Tah státu, pokud jde whetehr uživatel je přihlášen nebo ne jeden, o úroveň výš, protože používáte Redux, možná v Redux.
Komunikovat se useIsUserSubscribed že budete muset změnit svůj vnitřní stav.

Pro 1)

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

tah tohoto státu Redux store a používat jej s useSelector.

Pro 2), vrátí pole hodnota a zpětné volání z háku, místo toho jen hodnotu. To vám umožní komunikovat ze složky zpět do háku.

V useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Pak v onClick, můžete volat setUserIsSubscribed(false), měnící háček je vnitřní stav, a re-vykreslování komponenty.

Protože to byl označen jako duplicitní, nevadí, uvedení své odpovědi zde? stackoverflow.com/questions/70090096/... To pomůže hodně lidí. Já se ujistěte se, že vám upvote.
Vypadá to, že jste napsal odpověď na druhou otázku. Takže myslím, že budu nech to tady.

Jak re-render vlastní hák [duplicitní]

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii