How to re-render 사용자 지정 후크[중복]

0

질문

나는 주문 걸이라는 이름 useIsUserSubscribed 는지 확인하는 특정 사용자가 구독 신청을 했습니다. 그것은 경우 true 를 반환합니다 사용자 가입 및 거짓는 경우 사용자가 가입되어 있지 않은...

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;

...나는 버튼을 사용하여 이 후크는 텍스트 렌더링하는 조건에 따라 부울에서 돌아 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>
  );
} 

후에 onClick I would like to rerender 내 useIsUserSubscribed 걸이는 버튼을 텍스트켰습니다. 할 수 있습니까? 를 사용해야 하는 다른 방법?

javascript react-hooks reactjs
2021-11-24 03:45:44
1

최고의 응답

1

SubscribeUnsubscribeBtn 에 종속되어 있습니다 useIsUserSubscribed하지만, useIsUserSubscribed 에 의존하지 않에서 아무것도 SubscribeUnsubscribeBtn. 대 useIsUserSubscribed 는 현지 상태가 됩니다. 당신은 몇 가지를 선택 여기:

  1. 이동 상태에 관한 whetehr 사용자가 가입되어나지 않는 한,최대 수준을 사용하기 때문에 돌아 오는,아마도 돌아오.
  2. 통신 useIsUserSubscribed 하는 데 필요 변경 내부 상태에 있습니다.

1)

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

이동 상태를 돌아 오는 저장하고 사용 useSelector.

2),의 배열을 반환 값과에서 콜백 걸이 대신 값으로 설정합니다. 그것은 당신을 허용할 것입니다 의사 소통에서 구성 요소로 다시합니다.

useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

다음 onClick할 수 있습 call setUserIsSubscribed(false)변경,후크의 내부 상태,그리고 다시 렌더링의 구성 요소입니다.

2021-11-24 03:58:26

이 표시되었으로 중복되는,당신은 마음을 넣고 여기에 귀하의 답변? stackoverflow.com/questions/70090096/... 도움이 될 것입니다 사람들이 많. 내가 줄 수 있는지 확인하십시오 당신에게 투표.
Simone Anthony

같이 당신에 대해 답변을 다른 질문입니다. 그래서 내가 할 수 있습니다신것을 환영합니다.
bitspook

다른 언어로

이 페이지는 다른 언어로되어 있습니다

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................