Блог

У меня есть страница регистрации, которая сообщит индексу об успешном завершении операции. На данный момент связь осуществляется с помощью параметров запросов.

 const Foo: React.FC = () => {
    const router = useRouter();
    const [useModal, setUseModal] = useState(false);

    const closeModal = () => {
        setUseModal(false);
    };

    const generateModalContent = (queryContent: ParsedUrlQuery) => {
        if (Object.keys(queryContent).length !== 0) {
            return {
                //key-values from query
            };
        }
    };
    const modalContent = generateModalContent(router.query);

    if (Object.keys(modalContent!).length !== 0 amp;amp; useModal === false) {
        setUseModal(true);
    }

    return (
        <>
            //unrelated stuff
            {useModal ? <ModalNotification {...modalContent} /> : null}
        </>
    );
};
 

Проблема в том, что каждый раз closeModal , когда вызывается для закрытия модала, он отображается снова, так как при повторной визуализации запрос все еще существует, и цикл повторится. Я ищу чистый способ отображения данных, отправленных по запросу один раз, и после того, как пользователь закроет модал, он больше не появится.

Чтобы избежать вызова этой части вашего кода при каждом повторном рендеринге, вы должны обернуть ее в a useEffect с правильными зависимостями, например:

 React.useEffect(() => {
    const modalContent = generateModalContent(router.query);

    if (Object.keys(modalContent!).length !== 0 amp;amp; useModal === false) {
        setUseModal(true);
    }
}, [router]);
 

Таким образом, он будет выполняться только при router изменениях, а не в бесконечном цикле.

Вы можете прочитать больше об этом в документах React.