我使用reactJS 17.0.1和react-bootstrap 1.5.1以及bootstrap 4.6.0
我有一个modal,我想用openModal函数打开,它将状态设置为showModal true,但是当我打开modal时,我在控制台中得到这个错误:
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:69820:30)
at Fade (http://localhost:3000/static/js/vendors~main.chunk.js:27003:24)
at BackdropTransition
at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:65869:24)
at Modal (http://localhost:3000/static/js/vendors~main.chunk.js:28429:23)
at div
at UserPage (http://localhost:3000/static/js/main.chunk.js:6005:5)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:68877:29)
at div
at Container (http://localhost:3000/static/js/vendors~main.chunk.js:26367:23)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:68512:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:68132:35)
at App (http://localhost:3000/static/js/main.chunk.js:78:1)
在网上搜索,我发现很多人都有这个错误,但没有人在构建模型或使用react-bootstrap时遇到这个错误。下面是我为modal编写的代码
<Modal
onHide={this.closeModal}
backdrop="static"
keyboard={false}
show={this.state.show}>
<Modal.Header closeButton>
<Modal.Title>Delete account</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Are you sure you want to delete this account?</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={(e) => this.closeModal(e)} variant="secondary">Close</Button>
<Button onClick={(e) => this.onDeleteHandler(e)} variant="primary">Yes</Button>
</Modal.Footer>
</Modal>
函数(e) => this.onDeleteHandler(e)
与模式无关,只是删除帐户并重定向到主页。打开和关闭模式的另外两个函数是防止刷新和将状态设置为false和true。
编辑:我改变了身体的风格,我也更新了模态代码
2条答案
按热度按时间e4yzc0pl1#
5天后我才发现。如果你使用的是create-react-app,你会在项目的根文件夹中有一个index.js,在这里你会看到这样的东西:
你需要删除
<React.StrictMode>
的开始和结束标签,并像这样放置一个div:这是我的解决办法,如果有人有其他方法,请评论这个答案!
mbyulnm02#
这是bootstrap/reactstrap/react/etc的许多不同版本中的一个常见问题。
删除StrictMode将使错误消失,是的。但也许您需要StrictMode是出于其他原因。这是一种变通方法,而不是修复方法。
第二个可能的解决方法是,如果你不关心淡入淡出,那么关闭淡入淡出。