Я сделал компонент expire, который позволяет содержанию в нем исчезать через x секунд. Он работает с использованием состояния и setTimeout.
import React, { useEffect, useState } from 'react';
function Expire(props)
{
const [isVisible, setIsVisible] = useState(true);
useEffect(() =>
{
setTimer(props.delay);
}, []);
const setTimer = (delay) =>
{
setTimeout(() => setIsVisible(false), delay);
};
return (
isVisible
? <div>{props.children}</div>
: <span />
);
}
export default Expire;
Я использую его так:
<Expire delay="5000">
<Alert type={alertMsgState} size="col-md-10" />
</Expire>
Но проблема, с которой я столкнулся, заключается в том, что после исчезновения один раз через 5 секунд, когда снова alertMsgState
изменено [например, форма отправляется снова, поэтому я хочу снова показать предупреждение], сообщение не перерисовывается и исчезает через 5 секунд, как и должно быть. При осмотре я просто вижу элемент <span />
.
Пожалуйста, ответьте, используя только функциональные компоненты и крючки.