Как повторно отобразить пользовательский хук [дубликат]

0

Вопрос

У меня есть собственный крючок с именем 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...

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 зацепите так, чтобы текст моей кнопки переключался. Можно ли это сделать? Должен ли я использовать другой подход?

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

Лучший ответ

1

SubscribeUnsubscribeBtn имеет зависимость от useIsUserSubscribed, но useIsUserSubscribed не зависите ни от чего из SubscribeUnsubscribeBtn. Вместо этого, useIsUserSubscribed сохраняет местное состояние. У вас есть несколько вариантов здесь:

  1. Переместите состояние, касающееся того, подписан ли пользователь или нет, на один уровень выше, так как вы используете 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/... Это поможет многим людям. Я обязательно дам вам положительный отзыв.
Simone Anthony

Похоже, вы опубликовали ответ на другой вопрос. Так что, полагаю, я просто оставлю это здесь.
bitspook

На других языках

Эта страница на других языках

Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................