React Hooks - удаление компонента после использования - PullRequest
Новая
       8

React Hooks - удаление компонента после использования

0 голосов
/ 04 марта 2019

Я пытаюсь обернуть голову вокруг этого.Предполагается, что мой пользовательский хук создает простое всплывающее окно с нужным вводом и удаляет его через 3 секунды.Конечно, в настоящее время он рендерит каждый раз, когда счетчик сбрасывается.Как сделать так, чтобы он рендерился только один раз, а затем был удален из домена? 

export function createPopup(content, popupType) {
  const [message, setMessage] = useState(content)
  const [type, setType] = useState(popupType)
  const [value, setCounter] = useState(3)

  const myTimer = setTimeout(() => {
    return setCounter(value - 1)
  }, 1000)

  useLayoutEffect(() => {
    const id = setTimeout(() => {
      setCounter(value + -1);
    }, 1000);

    return () => {
      clearTimeout(id);
    };
  }, [value])

  return (
    <>
      {value !== 0 &&
        <PopupMolecule type={type}>
          {message}
        </PopupMolecule>
      }
    </>
  )
}

1 Ответ

0 голосов
/ 04 марта 2019

Я думаю, что вы хотите что-то более похожее на это: 

export function createPopup(content, popupType) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => setVisible(false), 3000);
  }, []);

  return (
    <>
      {visible &&
        <PopupMolecule type={popupType}>
          {content}
        </PopupMolecule>
      }
    </>
  )
}

Здесь все еще есть некоторые улучшения, которые необходимо сделать (например, исчезновение при выходе или некоторый переход, и способ настройки можно изменить).не используйте его более одного раза), но это должно решить указанную вами проблему.

Это покажет ваше всплывающее окно в течение трех секунд при монтировании, затем сделает ваше всплывающее окно невидимым и размонтирует его из DOM.Пустой массив в хуке useEffect позволяет ему сработать только при монтировании (и отключить, если вы вернете значение).Вам также не нужны другие переменные состояния, которые вы не обновляете.Они могут быть просто переданы в качестве параметров функции.

...