ReactJS、react引导程序、模式框："；错误：重新渲染过多。React限制渲染的数量以防止无限循环；

我正在学习ReactJS，我正在使用ReactBootstrap构建我的第一个组件

我集成模式时没有问题，但我尝试检查浏览器是否不是Internet Explorer来启动模式框，并得到以下错误：“模式框：”错误：重新渲染过多。React限制渲染数量以防止无限循环。“这可能是与正确更新状态相关的一件非常基本的事情，也许您可以帮助我，以下是代码：

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;
``

import React，{useState}来自“React”；
从“反应引导/模式”导入模式；
从“反应引导/按钮”导入按钮；
函数ModalStd（）{
const[show，setShow]=useState（false）；
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
const customClass=“模态标准”；
函数isIE（）{
var ua=navigator.userAgent；
var为_ie=ua.indexOf（“MSIE”）>-1 | | ua.indexOf（“Trident/”）>-1；
回报就是回报；
}
如果（！isIE（））{
handleShow（）；//我认为这是一个问题
}
返回(
发射模态
模态标题
接近
{/*
保存更改
*/}
);
}
导出默认ModalStd；
``

将手柄移动到

组件安装

类似：

useffect（（）=>{
如果（！isIE（））{
handleShow（）；//我认为这是一个问题
}
}，[]）//它相当于React类中的componentDidMount

---

并将

isIE

移动到组件外部。因为每次组件更新时（由于状态或道具更改），钩子中的任何语句都将被调用。

将手柄移动到

componentDidMount

类似：

useffect（（）=>{
如果（！isIE（））{
handleShow（）；//我认为这是一个问题
}
}，[]）//它相当于React类中的componentDidMount

---

并将

isIE

移动到组件外部。因为每次组件更新时（由于状态或道具更改），钩子中的任何语句都将被调用。

谢谢！@bravemaster。不确定为什么“componentDidMount（）{}当我在脚本中引入它时，Phpstorm将其标记为红色，因此我没有使用它，但我引入了您编写的useEffect，并去掉了isIE（）函数。componentDidMount用于React类。你在用鱼钩。我的方法（一个空数组的使用效果）是一个等价的组件。如果有帮助的话，考虑接受/批准我的回答。当然，我会接受你的答案。还有一件事让我发疯了…：-（，我将不得不写另一篇文章。谢谢！@bravemaster。我不确定当我在脚本中引入“componentDidMount（）{}”时，为什么Phpstorm会用红色标记“componentDidMount（）{}”，所以我没有使用它，但我介绍了您编写的useEffect，并去掉了isIE（）函数。componentDidMount是用于React类的。您正在使用React挂钩。我的方法是（一个空数组的使用效果）是一个等价的组件。如果有帮助的话，考虑接受/批准我的回答。当然，我会接受你的答案！还有另外一件事让我发疯……-（我必须写另一个帖子）。