How to re-render 사용자 지정 후크한 후 처음 렌더링

당신이 사용할 수 없습니다 useEffect 에 걸이 그 목적을 위해 이것을 시도하십시오:

hook:

function useIsUserSubscribed() {
  const currentUserId = useSelector((state) => state.auth.user?.id);


  const checkUser = useCallback(async (publisherId, setUserIsSubscribed) => {
    if (!currentUserId || !publisherId) return;
      try {
        const res = await checkSubscription(publisherId);
        setUserIsSubscribed(true);
      } catch (err) {
        setUserIsSubscribed(false);
      }
    
  }, [currentUserId]);

  return {checkUser};
}

export default useIsUserSubscribed;

구성 요소:

const SubscribeUnsubscribeBtn = ({profilePageUserId}) => {
    const [userIsSubscribed,setUserIsSubscribed]=useState(false);
    const { checkUser } = useIsUserSubscribed();

     useEffect(()=>{
        checkUser(profilePageUserId,setUserIsSubscribed)
     },[checkUser,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!!!!?
    checkUser(profilePageUserId,setUserIsSubscribed)
  }

  return (
    <button type="button" className="sub-edit-unsub-btn bsc-button" onClick={onClick}>
          {userIsSubscribed ? 'Subscribed' : 'Unsubscribed'}
    </button>
  );
} 

할 수도 있습니다 추가 로딩 상태에 걸이와 반환로도 확인할 수 있는 경우 프로세스가 이미지

추가 dependece 에 useIsUserSubscribed 의 useEffect.

hook:

function useIsUserSubscribed(publisherId) {
    const [userIsSubscribed, setUserIsSubscribed] = useState(null);
    const currentUserId = useSelector((state) => state.auth.user?.id);
    // add refresh dependece
    const refresh = useSelector((state) => state.auth.refresh);

    useEffect(() => {
        ...
    }, [publisherId, currentUserId, refresh]);
    ...
}

구성 요소:

const onClick = async () => {
    ...
    // HOW CAN I RERENDER THE HOOK HERE!!!!?
    // when click, you can dispatch a refresh flag.
    dispatch(refreshSubState([]))
}

노출 forceUpdate metheod.

hook:

function useIsUserSubscribed(publisherId) {
    const [update, setUpdate] = useState({});
    const forceUpdate = () => {
        setUpdate({});
    }  

    return {userIsSubscribed, forceUpdate};
}

구성 요소:

const {userIsSubscribed, forceUpdate} = useIsUserSubscribed(profilePageUserId);

const onClick = async () => {
    ...
    forceUpdate();
}

여기에서 다른 솔루션을 사용자에 의해@bitspook

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)변경,후크의 내부 상태,그리고 다시 렌더링의 구성 요소입니다.