如何在初始渲染后重新渲染自定義鈎子

Question

我有一個名為useIsUserSubscribed的自定義鈎子，它檢查是否訂閱了特定用戶。 如果用戶已訂閱，則返回 true，如果用戶未訂閱，則返回 false...

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 返回的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之后，我想重新渲染我的useIsUserSubscribed鈎子，以便我的按鈕文本切換。 這可以做到嗎？

Answer 1

添加對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 方法。

鈎：

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

    return {userIsSubscribed, forceUpdate};
}

零件：

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

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

Answer 2

你不能為此目的在你的鈎子中使用 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>
  );
} 

您還可以在您的鈎子中添加一些加載 state 並將它們也返回，這樣您就可以檢查過程是否已經完成

Answer 3

這是用戶@bitspook 的另一個解決方案

SubscribeUnsubscribeBtn依賴於useIsUserSubscribed ，但useIsUserSubscribed不依賴於SubscribeUnsubscribeBtn中的任何內容。 相反， useIsUserSubscribed保留了本地 state。 您在這里有幾個選擇：

1. 由於您使用的是 Redux，可能在 Redux 中，移動 state 關於用戶是否訂閱的問題。
2. 溝通使用useIsUserSubscribed需要更改其內部state。

對於1)

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

將此 state 移動到 Redux 存儲並與 useSelector 一起使用。

對於2) ，從鈎子返回一個值和回調數組，而不僅僅是值。 它將允許您從組件通信回鈎子。

在useIsUserSubscribed中，

  return [userIsSubscribed, setUserIsSubscribed];

然后在onClick中，您可以調用setUserIsSubscribed(false) ，更改鈎子的內部 state 並重新渲染您的組件。