如何重新呈现一定挂钩后，初始呈现

Question 1

我有自定义的钩子命名为 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;

...我有一个按钮，使用这种挂钩，使案文条件的基础上布尔回来 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 钩，使我按钮文本的切换。可以这样做？

Question 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>
  );
}

你还可以添加一些装载状态在你的钩子和他们返回太，所以你可以检查过程已经完成或没有

Question 3

增加一个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();
}

Question 4

这里是另一种解决办法通过用户@bitspook

SubscribeUnsubscribeBtn 有一个依赖 useIsUserSubscribed但 useIsUserSubscribed 不依靠任何东西从 SubscribeUnsubscribeBtn. 相反， useIsUserSubscribed 是保持当地的状态。你有两个选择：

移动状态的关于whetehr用户订阅了或没有上一级，由于你是终极版的使用，也许是终极版的.
沟通 useIsUserSubscribed 你需要改变其内部的状态。

对于 1)

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

移动这个国家为终极版储存和使用与useSelector.

对于 2)返回一系列的价值和回调从挂钩，而不是仅仅是值。它会让你沟通从分回到挂钩。

在 useIsUserSubscribed,

  return [userIsSubscribed, setUserIsSubscribed];

然后在 onClick你可以叫 setUserIsSubscribed(false)改变钩的内部状态，并重新呈现你的分量。

Mohammad · Answer 1 · 2021-11-24T03:03:13