ReactJS， react-bootstrap， Modal Box： "Error: Too many re-renders. React limits the number of renders

Question

我正在学习ReactJS，我正在使用react-bootstrap构建我的第一个组件。

我没有问题地集成了模态，但我正在尝试检查浏览器是否不是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;
``

Answer 1

将handleShow移动到componentDidMount，如：

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

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