NodeJS 使用react-bootstrap打开模式时出错

qv7cva1a  于 2023-05-06  发布在  Node.js
关注(0)|答案(2)|浏览(106)

我使用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。
编辑:我改变了身体的风格,我也更新了模态代码

e4yzc0pl

e4yzc0pl1#

5天后我才发现。如果你使用的是create-react-app,你会在项目的根文件夹中有一个index.js,在这里你会看到这样的东西:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

你需要删除<React.StrictMode>的开始和结束标签,并像这样放置一个div:

ReactDOM.render(
  <div>
    <App />
  </div>,
  document.getElementById('root')
);

这是我的解决办法,如果有人有其他方法,请评论这个答案!

mbyulnm0

mbyulnm02#

这是bootstrap/reactstrap/react/etc的许多不同版本中的一个常见问题。
删除StrictMode将使错误消失,是的。但也许您需要StrictMode是出于其他原因。这是一种变通方法,而不是修复方法。
第二个可能的解决方法是,如果你不关心淡入淡出,那么关闭淡入淡出。

<Modal fade={false}></Modal>

相关问题