在 React 的 useEffect 中使用 Materialize CSS 初始化不像在 componentDidMount 中那样工作

Question

使用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>
);
};

我认为问题出在document.addEventListner上

Answer 1

你应该知道什么时候你只想使用效果像组件DidMount一样，你应该传递空数组作为第二个参数。

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

这样使用效果只运行一次。 请注意：当组件DidMount触发时，这意味着所有HTML都已经在DOM中。

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