Cum de a re-face un cârlig personalizat [duplicat]

Question 1

Am personalizat cârlig nume useIsUserSubscribed care verifică pentru a vedea un anumit utilizator este abonat. Returnează true dacă utilizatorul este abonat și false dacă utilizatorul nu este abonat...

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;

...Am un buton, folosind acest cârlig care face textul condiționat bazează pe boolean întors de la 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>
  );
}

După onClick Aș dori să rerender meu useIsUserSubscribed cârlig, Astfel încât textul buton comută. Se poate face asta? Ar trebui să folosesc o abordare diferită?

Question 2

SubscribeUnsubscribeBtn are o dependență pe useIsUserSubscribeddar useIsUserSubscribed nu depinde de nimic din SubscribeUnsubscribeBtn. În schimb, useIsUserSubscribed ține un stat locale. Aveți câteva opțiuni aici:

Muta stat cu privire whetehr utilizatorul este abonat sau nu un nivel mai sus, din moment ce sunt utilizați Redux, probabil, în Redux.
Să comunice useIsUserSubscribed de care aveți nevoie pentru a schimba starea sa internă.

Pentru 1)

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

muta acest stat să Redux magazin și să-l utilizați cu useSelector.

Pentru 2), returnează o matrice de valoare și apel de pe cârlig, în loc de doar valoarea. Aceasta vă va permite să comunice din componenta înapoi în cârlig.

În useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Apoi, în onClick, puteți apela setUserIsSubscribed(false), schimbarea cârlig de stat interne, și re-randare de componente.

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

SubscribeUnsubscribeBtn are o dependență pe useIsUserSubscribeddar useIsUserSubscribed nu depinde de nimic din SubscribeUnsubscribeBtn. În schimb, useIsUserSubscribed ține un stat locale. Aveți câteva opțiuni aici:

Muta stat cu privire whetehr utilizatorul este abonat sau nu un nivel mai sus, din moment ce sunt utilizați Redux, probabil, în Redux.
Să comunice useIsUserSubscribed de care aveți nevoie pentru a schimba starea sa internă.

Pentru 1)

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

muta acest stat să Redux magazin și să-l utilizați cu useSelector.

Pentru 2), returnează o matrice de valoare și apel de pe cârlig, în loc de doar valoarea. Aceasta vă va permite să comunice din componenta înapoi în cârlig.

În useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Apoi, în onClick, puteți apela setUserIsSubscribed(false), schimbarea cârlig de stat interne, și re-randare de componente.

Din moment ce acest lucru a fost marcat ca un duplicat, puteți lăsa răspunsurile voastre aici? stackoverflow.com/questions/70090096/... Aceasta va ajuta o mulțime de oameni. Eu va asigurați-vă că pentru a da un vot pentru.
Se pare ca ai postat răspunsul la cealaltă întrebare. Deci, cred că o să las asta aici.

Cum de a re-face un cârlig personalizat [duplicat]

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie