Comment re-rendre personnalisé crochet [dupliquer]

Question 1

J'ai personnalisé crochet nommé useIsUserSubscribed qui vérifie spécifique de l'utilisateur est abonné. Elle retourne true si l'utilisateur est abonné, et false si l'utilisateur n'est pas abonné...

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;

...J'ai un bouton à l'aide de ce crochet qui rend le texte conditionnel basé sur le booléen retourné à partir de 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>
  );
}

Après onClick Je voudrais alors rendre à nouveau mon la useIsUserSubscribed crochet de Sorte que mon texte du bouton change. Cela peut-il être fait? Dois-je utiliser une approche différente?

Question 2

SubscribeUnsubscribeBtn a une dépendance sur useIsUserSubscribedmais useIsUserSubscribed ne dépend pas de quelque chose de SubscribeUnsubscribeBtn. Au lieu de cela, useIsUserSubscribed est de garder un état local. Vous avez un couple de choix ici:

Déplacer l'etat concernant demande si l'utilisateur est abonné ou pas de remonter d'un niveau, puisque vous utilisez Redux, peut-être dans Redux.
Communiquer à useIsUserSubscribed que vous avez besoin de changer son état interne.

Pour 1)

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

se déplacer cet état de Redux les stocker et les utiliser avec useSelector.

Pour 2), retourner un tableau de valeur et de rappel à partir du crochet, au lieu de la valeur. Il vous permettra de communiquer de composant dans le crochet.

Dans useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Puis dans onClick, vous pouvez appeler setUserIsSubscribed(false), en changeant le crochet interne de l'état, et re-rendu de votre composant.

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

SubscribeUnsubscribeBtn a une dépendance sur useIsUserSubscribedmais useIsUserSubscribed ne dépend pas de quelque chose de SubscribeUnsubscribeBtn. Au lieu de cela, useIsUserSubscribed est de garder un état local. Vous avez un couple de choix ici:

Déplacer l'etat concernant demande si l'utilisateur est abonné ou pas de remonter d'un niveau, puisque vous utilisez Redux, peut-être dans Redux.
Communiquer à useIsUserSubscribed que vous avez besoin de changer son état interne.

Pour 1)

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

se déplacer cet état de Redux les stocker et les utiliser avec useSelector.

Pour 2), retourner un tableau de valeur et de rappel à partir du crochet, au lieu de la valeur. Il vous permettra de communiquer de composant dans le crochet.

Dans useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Puis dans onClick, vous pouvez appeler setUserIsSubscribed(false), en changeant le crochet interne de l'état, et re-rendu de votre composant.

Depuis cela a été marquée comme un doublon, avez-vous l'esprit de mettre les réponses à vos questions? stackoverflow.com/questions/70090096/... Il va aider beaucoup de gens. Je ferai en sorte de vous donner un upvote.
On dirait que vous avez posté la réponse à l'autre question. Donc je suppose que je vais juste laisser ça ici.

Comment re-rendre personnalisé crochet [dupliquer]

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie