ReactJS延迟显示Bootstrap模态框失效问题排查求助

我尝试在延迟后显示Bootstrap模态框，但仅首页被展示，未检测到任何报错。以下是我的App.js代码：

App.js:

import { useEffect, useState } from "react";
import Home from "./pages/Home";
import Modal from 'react-bootstrap/Modal';

function MyVerticallyCenteredModal() {
    return (
      <Modal
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Modal heading
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <h4>Centered Modal</h4>
          <p>
            Some Text
          </p>
        </Modal.Body>
      </Modal>
    );
}

function App() {

    const [modalShow, setModalShow] = useState(false);

    useEffect(() => {
        const timeId = setTimeout(() => setModalShow(true), 3000)
    
        return () => clearTimeout(timeId)
    })

    return (
        <div className="App">
            <Home />
            {modalShow && (<MyVerticallyCenteredModal />)}
        </div>
    );
}

export default App;

你的代码存在两个核心问题：

• useEffect缺少依赖数组，导致定时器被反复清除
  当前useEffect没有传入依赖数组，组件每次渲染都会重新执行这个钩子，每次都会创建新定时器并立刻清除上一个。最终定时器永远无法触发，因为还没到时间就被清掉了。
  修复：给useEffect加上空依赖数组，让它仅在组件首次挂载时执行一次：

  useEffect(() => {
      const timeId = setTimeout(() => setModalShow(true), 3000)
  
      return () => clearTimeout(timeId)
  }, []) // 添加空依赖数组
  

• react-bootstrap的Modal需要受控属性控制显示
  react-bootstrap的Modal组件不会自动根据渲染状态显示，必须通过show属性明确控制可见性，同时需要onHide处理关闭逻辑。
  修复后的模态框组件：

  function MyVerticallyCenteredModal({ show, onHide }) {
      return (
        <Modal
          show={show}
          onHide={onHide}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Modal heading
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Centered Modal</h4>
            <p>
              Some Text
            </p>
          </Modal.Body>
        </Modal>
      );
  }
  

  同时修改App组件的调用逻辑：

  return (
      <div className="App">
          <Home />
          <MyVerticallyCenteredModal 
            show={modalShow} 
            onHide={() => setModalShow(false)} 
          />
      </div>
  );
  

内容的提问来源于stack exchange，提问作者TCL