ฉันมีกำหนดเองชื่อตะขอ useIsUserSubscribed
นั่นเช็คให้เห็นเป็นเฉพาะผู้ใช้เป็นบอกรับ. มันจะได้ค่าจริงเมื่อผู้ใช้คือบอกรับกัปลอมถ้าผู้ใช้ไม่ได้บอกรับ...
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;
ฉันมีปุ่มนี้ใช้ตะขอนั่น renders ข้อความ conditionally ดูจากตรรกะกลับมาจาก 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
ฉันอยากจะ rerender ของฉันที่ useIsUserSubscribed
ฮุคงั้นนั่นของข้อความบนปุ่ม toggles. นี่มันสามารถทำ? ฉันควรจะใช้ที่แตกต่างกันใก?