Reactjs 在React'；s使用效果不'；它不像在componentDidMount中那样工作

使用componentDidMount（）初始化materialize js工作正常，如文档所示

componentDidMount() {
document.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".sidenav");
  M.Sidenav.init(elems, {});
});

}

但是，每当我将组件转换为功能组件并在useEffect中运行相同的初始化时，它就不起作用，我的sideNav也没有初始化

全部代码

import React, { Fragment, useEffect } from "react";
import M from "materialize-css/dist/js/materialize.min.js";

export const Navbar = () => {
  useEffect(() => {
    document.addEventListener("DOMContentLoaded", function() {
      var sidenav = document.querySelectorAll(".sidenav");
      M.Sidenav.init(sidenav, {});
    });
  }, []);

  return (
    <Fragment>
      <div className="navbar-fixed">
        <nav className="teal darken-3">
          <div className="nav-wrapper mx-4">
            <a href="#!" className="brand-logo">
              <i className="far fa-id-badge" />
              EMS
            </a>
            <a href="#!" className="sidenav-trigger" data-target="mobile-nav">
              <i className="material-icons">menu</i>
            </a>
            <ul className="right hide-on-med-and-down">
              <li>
                <a href="profiles.html">Settings</a>
              </li>
              <li>
                <a href="register.html">Register</a>
              </li>
              <li>
                <a href="login.html">Login</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <ul className="sidenav blue-grey darken-4" id="mobile-nav">
        <h3 className="teal-text ml-2">EMS</h3>
        <li>
          <div className="divider blue-grey darken-2"></div>
        </li>
        <li>
          <a href="profiles.html" className="white-text">
            Settings
          </a>
        </li>
        <li>
          <a href="register.html" className="white-text">
            Register
          </a>
        </li>
        <li>
          <a href="login.html" className="white-text">
            Login
          </a>
        </li>
      </ul>
    </Fragment>
  );
};

import React，{Fragment，useffect}来自“React”；
从“MaterializeCSS/dist/js/materialize.min.js”导入M；
导出常量导航栏=（）=>{
useffect（（）=>{
document.addEventListener（“DOMContentLoaded”，function（））{
var sidenav=document.queryselectoral（“.sidenav”）；
M.Sidenav.init（Sidenav，{}）；
});
}, []);
返回(









邮政特快专递









);
};

---

我认为问题出在文档上。addEventListner

您应该知道，当您只想使用像componentDidMount一样的效果时，您应该将空数组作为第二个参数传递。如下

useEffect(() => {
    var sidenav = document.querySelectorAll(".sidenav");
    M.Sidenav.init(sidenav, {});
  }, []);

这样，useEffect只运行一次。 注意：当componentDidMount激发时，意味着所有HTML都已经在DOM中了。因此，对于完全加载的数据，您不需要任何侦听器

---

请注意，react中的效果只是效果，不要将其视为生命周期。

问题在于初始化根本不会发生，而不是它会发生很多次。在这种情况下，这可能取决于许多因素。是否导入组件？还是像这样的？你能给我看一下整个组件吗？我把问题编辑成包含整个组件。我更新了答案。