React Hooks — удаление компонента после использования
Я пытаюсь обернуть мою голову вокруг этого. Мой пользовательский хук должен создать простое всплывающее окно с нужным вводом и удалить его через 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
Я думаю, вы хотите что-то еще вроде этого:
export function createPopup(content, popupType) {
const [visible, setVisible] = useState(true);
useEffect(() => {
setTimeout(() => setVisible(false), 3000);
}, []);
return (
<>
{visible &&
<PopupMolecule type = {popupType}>
{content}
</PopupMolecule>
}
</>
)
}
Есть еще некоторые улучшения, которые необходимо сделать здесь (например, исчезновение при выходе или каком-либо переходе, и то, как это настроено, вы не можете использовать его более одного раза), но это должно решить проблему, которую вы указали.
Это покажет ваше всплывающее окно в течение трех секунд при монтировании, затем сделает ваше всплывающее окно невидимым и отключит его от DOM. Пустой массив в хуке useEffect сообщает ему, что он срабатывает только при монтировании (и размонтировании, если вы возвращаете значение). Вам также не нужны другие переменные состояния, которые вы не обновляете. Их можно просто передать как параметры функции.
Если вы хотите остановить повторный рендеринг при каждом изменении
value, вам следует просто полностью избавиться от состоянияvalue.