页面刷新时的模态显示答案

【问题标题】：Modal shows on page refresh页面刷新时的模态显示
【发布时间】：2023-02-06 19:08:54
【问题描述】：

很难弄清楚为什么模式在页面刷新时显示，但在单击“关于”链接时不显示。我认为这与道具传递有关，但不明白出了什么问题。

App.js 文件：

function App() {
  const [showAboutModal, setShowAboutModal] = useState(false);
  const navLinkClicked = (selectedKey) => {
    if (selectedKey==='about') {
      alert(showAboutModal)
      setShowAboutModal(true)
    }
  }

  return (
    <div className="App">
      <AboutModal showAboutModal={showAboutModal}/>

      <Navbar collapseOnSelect expand="lg" bg="light">
      <Container>
        <img width="50" height="50" src={beacon} className="App-logo" alt="logo" />
        <Navbar.Brand href="/">Title</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">  
          </Nav>
          <Nav
            onSelect={(selectedKey) => navLinkClicked(selectedKey)}>
            <Nav.Link eventKey="about">About</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    </div>
  );
}

export default App;

AboutModal.js 文件：

function AboutModal(showAboutModal) {


  const [showModal, setShowModal] = useState(showAboutModal);

  return (
      <Modal show={showModal}>
        <Modal.Header>
          <Modal.Title>About</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={()=>setShowModal(false)}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
  );
}

export default AboutModal;

我认为问题出在这一行：const [showModal, setShowModal] = useState(showAboutModal);

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

AboutModal 组件中的 showAboutModal 的值始终为真值，并且求值为 { "showAboutModal": false } 之类的对象。这意味着模式将在页面加载时可见，因为您使用对象来切换可见性而不是该对象的特定键的值。

AboutModal 组件可以解构函数声明中的 props 或在 useState 调用中指定键，如下所示：

function AboutModal({ showAboutModal }) { // destructure
  const [showModal, setShowModal] = useState(showAboutModal);
//...

//OR
function AboutModal(props) {
  const [showModal, setShowModal] = useState(props.showAboutModal); // specify key
//...

【讨论】：