Como re-renderizar um costume gancho [duplicado]

Question 1

Eu tenho costume de gancho chamado useIsUserSubscribed que verifica um determinado usuário está inscrito. Ele retorna true se o usuário está inscrito e false se o usuário não é inscrito...

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;

...Eu tenho um botão usando esse gancho que compõe o texto condicional baseado no boolean retornado 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>
  );
}

Depois de onClick Eu gostaria de rerender o meu useIsUserSubscribed gancho Para que o meu texto do botão muda. Isso pode ser feito? Devo usar uma abordagem diferente?

Question 2

SubscribeUnsubscribeBtn tem uma dependência no useIsUserSubscribed, mas useIsUserSubscribed não depende de nada do SubscribeUnsubscribeBtn. Em vez disso, useIsUserSubscribed é a manutenção de um estado local. Você tem duas opções aqui:

Mova o estado, em relação whetehr usuário está inscrito ou não um nível acima, desde que você está usando Redux, talvez em Redux.
Comunicar à useIsUserSubscribed o que você precisa para mudar seu estado interno.

Para 1)

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

mover este estado Redux store e usá-lo com useSelector.

Para 2), retornar uma matriz de valor e de retorno de chamada do gancho, em vez de apenas o valor. Ele irá permitir que você se comunique a partir de componentes de volta no gancho.

No useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Em seguida, em onClick, você pode chamar setUserIsSubscribed(false), mudando o gancho interno do estado, e re-renderizar o componente.

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

SubscribeUnsubscribeBtn tem uma dependência no useIsUserSubscribed, mas useIsUserSubscribed não depende de nada do SubscribeUnsubscribeBtn. Em vez disso, useIsUserSubscribed é a manutenção de um estado local. Você tem duas opções aqui:

Mova o estado, em relação whetehr usuário está inscrito ou não um nível acima, desde que você está usando Redux, talvez em Redux.
Comunicar à useIsUserSubscribed o que você precisa para mudar seu estado interno.

Para 1)

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

mover este estado Redux store e usá-lo com useSelector.

Para 2), retornar uma matriz de valor e de retorno de chamada do gancho, em vez de apenas o valor. Ele irá permitir que você se comunique a partir de componentes de volta no gancho.

No useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Em seguida, em onClick, você pode chamar setUserIsSubscribed(false), mudando o gancho interno do estado, e re-renderizar o componente.

Uma vez que este foi marcado como um duplicado, você se importa de colocar suas respostas aqui? stackoverflow.com/questions/70090096/... Ele vai ajudar um monte de gente. Vou certificar-se de dar-lhe um vote positivamente.
Parece que você já postou a resposta na outra pergunta. Então acho que vou deixar isso aqui.

Como re-renderizar um costume gancho [duplicado]

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria