Özel bir kanca nasıl yeniden oluşturulur [çoğalt]

Question 1

Adında özel bir kancam var useIsUserSubscribed bu, belirli bir kullanıcının abone olup olmadığını kontrol eder. Kullanıcı abone olduysa true, kullanıcı abone olmadıysa false değerini döndürür...

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;

...Bu kancayı kullanarak, döndürülen boolean değerine göre koşullu olarak metin oluşturan bir düğmem var 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>
  );
}

Sonra onClick Ben benim rerender istiyorum useIsUserSubscribed düğme metnimin geçiş yapmasını sağlayın. Bu yapılabilir mi? Farklı bir yaklaşım kullanmalı mıyım?

Question 2

SubscribeUnsubscribeBtn bağımlılığa sahiptir useIsUserSubscribed, ama useIsUserSubscribed hiçbir şeye bağımlı olma SubscribeUnsubscribeBtn. Yerine, useIsUserSubscribed yerel bir devlet tutuyor. Burada birkaç seçeneğin var.:

Redux'u kullandığınızdan, belki de Redux'ta olduğundan, kullanıcının abone olup olmadığına ilişkin durumu bir seviye yukarı taşıyın.
İletişim için useIsUserSubscribed iç durumunu değiştirmen gerektiğini.

İçin 1)

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

bu durumu Redux store'a taşıyın ve useSelector ile kullanın.

İçin 2), bir dizi değeri döndürür ve yalnızca değer yerine kancadan geri çağırır. Bu, bileşenden kancaya geri iletişim kurmanıza izin verecektir.

İçinde useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Sonra içeri onClick, arayabilirsin setUserIsSubscribed(false), kancanın iç durumunu değiştirme ve bileşeninizi yeniden oluşturma.

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

SubscribeUnsubscribeBtn bağımlılığa sahiptir useIsUserSubscribed, ama useIsUserSubscribed hiçbir şeye bağımlı olma SubscribeUnsubscribeBtn. Yerine, useIsUserSubscribed yerel bir devlet tutuyor. Burada birkaç seçeneğin var.:

Redux'u kullandığınızdan, belki de Redux'ta olduğundan, kullanıcının abone olup olmadığına ilişkin durumu bir seviye yukarı taşıyın.
İletişim için useIsUserSubscribed iç durumunu değiştirmen gerektiğini.

İçin 1)

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

bu durumu Redux store'a taşıyın ve useSelector ile kullanın.

İçin 2), bir dizi değeri döndürür ve yalnızca değer yerine kancadan geri çağırır. Bu, bileşenden kancaya geri iletişim kurmanıza izin verecektir.

İçinde useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

Sonra içeri onClick, arayabilirsin setUserIsSubscribed(false), kancanın iç durumunu değiştirme ve bileşeninizi yeniden oluşturma.

Bu kopya olarak işaretlendiğinden, Cevaplarınızı buraya koyar mısınız? stackoverflow.com/questions/70090096/ ... Birçok insana yardım edecek. Sana bir not vereceğim.
Görünüşe göre cevabı diğer soruya göndermişsin. Sanırım bunu burada bırakacağım.

Özel bir kanca nasıl yeniden oluşturulur [çoğalt]

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride