关闭时卸载导航栏下拉列表

Question

我正在使用引导反应导航，如下所示：

      <Navbar bg="dark" variant="dark" expand="lg" className="navbar">
        <Container>
          <Navbar.Brand className="edowl-title small-scale"> <Link to={"/"}>title</Link></Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <NavDropdown className="Main-element tiny-scale" title="Updates" id="basic-nav-dropdown">
                <Updates/>
              </NavDropdown>
              <NavDropdown className="Main-element tiny-scale" title="Notes" id="basic-nav-dropdown">
                <QuickNotes/>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

当第二个下拉更新被加载时，它将运行一个请求；"更新"；

    const [updates, setUpdates] = useState([])
    const [{ tokens }, dispatch] = useStateValue();
    const[errorMsg, setErrorMsg] = useState(false);
    useEffect(() => {
        const loadUpdates = async () => {
            try {
                const post_request = await Axios({
                    method: "get",
                    url: `${window.ipAddress.ip}/Update/Recent`,
                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${tokens.access_token}` }
                })
                console.log(post_request)
                if (post_request.status === 200) {
                    setUpdates(post_request.data)
                }
                else { setErrorMsg("Couldnt complete") }
            }
            catch (err) {
                if (err) {
                    setErrorMsg(err)
                }
            }
        }
        loadUpdates();
    }, [])
    useEffect(() => {
        if (updates.length <= 0) {
            var todayDate = new Date();
            var todayDateText = todayDate.getDate() + "/" + (todayDate.getMonth() + 1) + "/" + todayDate.getFullYear()
            console.log(todayDateText);
            setUpdates([{ content: "There is currently no new updates", generatedDate: todayDateText, id: 1 }])
        }
    },[updates])
    return (
        <div className="update-container">
            <ul className="update-list">
                {updates.map((update, index) => (
                    <li key={index} className="update-element"><p>{update?.generatedDate} - {update?.content}</p></li>
                ))}
            </ul>
        </div>
    );

显然，因为它只在装载时运行请求，这意味着当您关闭菜单并重新打开它时，它不会重新执行请求。

我的问题是，如何在最小化组件的情况下使其卸载？

^这样，当它被重新打开时，它将重新装载，请求将再次执行。

Answer 1

我认为一个简单的方法是管理NavBar组件中的计数器或布尔切换，然后可以使用NavBar中的onToggle道具。Collapse来更新该值。将该值传递到Updates组件中，然后在每次navBar切换时要触发的useEffect内部的依赖数组中使用该值：https://react-bootstrap.github.io/components/navbar/#responsive-行为