Cómo renderizar una costumbre gancho [duplicar]

Question 1

He personalizado gancho llamado useIsUserSubscribed que se comprueba un determinado usuario está suscrito. Devuelve true si el usuario está suscrito y false si el usuario no está suscrito...

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;

...Tengo un botón usando este enlace que muestra el texto condicional basada en el boolean devuelve desde 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>
  );
}

Después de onClick Me gustaría volver a representar a mi la useIsUserSubscribed gancho Para que mi texto del botón cambia. Se puede hacer esto? Debo utilizar un enfoque diferente?

Question 2

SubscribeUnsubscribeBtn tiene una dependencia en useIsUserSubscribedpero useIsUserSubscribed no depende de nada de SubscribeUnsubscribeBtn. En su lugar, useIsUserSubscribed es mantener un estado local. Usted tiene un par de opciones aquí:

Mueva el estado con respecto a whetehr usuario está suscrito o no de un nivel superior, puesto que usted está utilizando Redux, tal vez en Redux.
Comunicar a useIsUserSubscribed que usted necesita para cambiar su estado interno.

Para 1)

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

mover este estado Redux almacenar y utilizar con useSelector.

Para 2), devolver una matriz de valor y de devolución de llamada desde el gancho, en lugar de sólo el valor. Esto le permitirá comunicarse de componente nuevo en el gancho.

En useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

A continuación, en onClickusted puede llamar setUserIsSubscribed(false), cambiar el gancho interno del estado, y la nueva representación de su componente.

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

SubscribeUnsubscribeBtn tiene una dependencia en useIsUserSubscribedpero useIsUserSubscribed no depende de nada de SubscribeUnsubscribeBtn. En su lugar, useIsUserSubscribed es mantener un estado local. Usted tiene un par de opciones aquí:

Mueva el estado con respecto a whetehr usuario está suscrito o no de un nivel superior, puesto que usted está utilizando Redux, tal vez en Redux.
Comunicar a useIsUserSubscribed que usted necesita para cambiar su estado interno.

Para 1)

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

mover este estado Redux almacenar y utilizar con useSelector.

Para 2), devolver una matriz de valor y de devolución de llamada desde el gancho, en lugar de sólo el valor. Esto le permitirá comunicarse de componente nuevo en el gancho.

En useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

A continuación, en onClickusted puede llamar setUserIsSubscribed(false), cambiar el gancho interno del estado, y la nueva representación de su componente.

Desde esta fue marcado como un duplicado, ¿te importaría poner aquí sus respuestas? stackoverflow.com/questions/70090096/... va a ayudar a mucha gente. Me aseguraré de darle un upvote.
Parece que ha publicado la respuesta a la otra pregunta. Así que supongo que voy a dejar esto aquí.

Cómo renderizar una costumbre gancho [duplicar]

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría