วิธีที่จะส่งจัดการพางการกำหนดตะขอหลังจากเริ่มการจัดการพา

คุณไม่สามารถใช้ useEffect ในตะขอหรดประสงค์พยายามนี้:

ตะขอ:

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.

ตะขอ:

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.

ตะขอ:

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 ของผู้ใช้คือบอกรับหรือไม่ใช่หนึ่งระดับขึ้นตั้งแต่คุณใช้ Redux บางทีใน Redux.
2. ติดต่อไป useIsUserSubscribed ที่คุณต้องเปลี่ยนแปลงของมันภายในรัฐด้วย

สำหรับ 1)

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

ย้ายไปประเทศนี้ต้อง Redux ร้านและใช้มันกับ useSelector.

สำหรับ 2),กลับมาเป็นอาเรย์ของค่าและเรียกกลับจากจุดขายของแทนที่จะเพียงค่า. มันจะช่วยให้คุณติดต่อจากส่วนประกอบกลับมาจับเราเสร็จเรื่องรึยัง?

ใน useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

งั้นอยู่ onClickคุณสามารถเรียก setUserIsSubscribed(false)เปลี่ยนไปเป็นภายในรัฐและส่งการแสดงผลของคุณส่วนประกอบ.