วิธีที่จะส่งจัดการพางการกำหนดตะขอ[ที่ซ้ำกัน]

0

คำถาม

ฉันมีกำหนดเองชื่อตะขอ 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. นี่มันสามารถทำ? ฉันควรจะใช้ที่แตกต่างกันใก?

javascript react-hooks reactjs
2021-11-24 03:45:44
1

คำตอบที่ดีที่สุด

1

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)เปลี่ยนไปเป็นภายในรัฐและส่งการแสดงผลของคุณส่วนประกอบ.

2021-11-24 03:58:26

ตั้งแต่นี้เป็นจำนวนที่ซ้ำกันคุณจะว่าอะไรไหมให้คำตอบของคุณที่นี่? stackoverflow.com/questions/70090096/... มันจะช่วย alot ของคน ฉันจะทำให้แน่ใจว่าต้องทำให้คุณ upvote.
Simone Anthony

ดูเหมือนว่าคุณจะส่งคำตอบอยู่อีกคำถาม ดังนั้นฉันคิดว่าฉันจะออกไปจากที่นี่
bitspook

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่