ReactJS, response- bootstrap, Модальное окно: «Ошибка: слишком много повторных визуализаций. React ограничивает число визуализаций, чтобы предотвратить бесконечное l oop».

Question

Я изучаю ReactJS, и я создаю свой первый компонент, используя response- bootstrap.

Я без проблем интегрировал модальный режим, но я пытаюсь проверить, не работает ли браузер Inte rnet Explorer, чтобы запустить модальное окно и получить эту ошибку: "Modal Box:" Ошибка: слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop. "Вероятно, это очень базовая c вещь, связанная с корректным обновлением состояния, возможно, вы можете мне помочь, это код:

import React, { useState } from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';

function ModalStd () {

    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const customClass = "modal-std";

    function isIE() {
        var ua = navigator.userAgent;
        var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
        return is_ie;
    }

    if (!isIE()) {
        handleShow(); // here is the issue I think
    }

    return (
        <>
            <Button variant="primary" onClick={handleShow}>
                Launch modal
            </Button>

            <Modal backdropClassName={customClass}
                   dialogClassName={customClass}
                   show={show} onHide={handleClose}
                   animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body></Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                    {/*<Button variant="primary" onClick={handleClose}>
                        Save Changes
                    </Button>*/}
                </Modal.Footer>
            </Modal>
        </>
    );
}

export default ModalStd;
``

Answer 1

Переместить handleShow в componentDidMount как:

useEffect(() => {
   if (!isIE()) {
        handleShow(); // here is the issue I think
    }
}, []) // it is equivalent to componentDidMount in React classes

И переместить isIE за пределы компонента. Поскольку любые операторы внутри ловушки будут вызываться каждый раз, когда компонент обновляется (из-за изменения состояния или реквизита).