如果我导航到页面，DOMContentLoaded 不起作用，仅在刷新时答案

【问题标题】：DOMContentLoaded doesn't work if i navigate to the page, only on refresh如果我导航到页面，DOMContentLoaded 不起作用，仅在刷新时
【发布时间】：2020-06-12 17:20:02
【问题描述】：

就像我提到的，DOMContentLoaded 中的代码仅在我刷新页面时运行，但如果我导航到所述页面，我的表中的数据将不再显示。我在这里看到了一个非常相似的帖子（DOMContentLoaded not firing after navigation but fires on page reload when using javascript_pack_tag），但我无法为我自己的代码找出解决方案。这是我的代码的样子：

import React from "react";
import "../Styles/Admin.css";
import fetch from "../axios";

const AdminDbCl = () => {
document.addEventListener("DOMContentLoaded", function () {
    fetch
      .get("http://localhost:9000/getClienti")
      .then((data) => loadHTMLTable(data["data"]));
  });

function loadHTMLTable(data) {
    const table = document.querySelector("table tbody");

    if (data.length === 0) {
      table.innerHTML =
        "<tr><td class='no-data' colspan='11'>No Data</td></tr>";
      return;
    }

    let tableHtml = "";

    try {
      for (var i in data) {
        data[i].map(
          ({ id_cl, nume_cl, prenume_cl, adresa_cl, nr_tel_cl, mail_cl }) => {
            tableHtml += "<tr>";
            tableHtml += `<td>${id_cl}</td>`;
            tableHtml += `<td>${nume_cl}</td>`;
            tableHtml += `<td>${prenume_cl}</td>`;
            tableHtml += `<td>${adresa_cl}</td>`;
            tableHtml += `<td>${nr_tel_cl}</td>`;
            tableHtml += `<td>${mail_cl}</td>`;
            tableHtml += `<td><button className="edit-row-btn" data-id=${id_cl}>Edit</td>`;
            tableHtml += `<td><button className="delete-row-btn" data-id=${id_cl}>Delete</td>`;
            tableHtml += "</tr>";
          }
        );
      }
    } catch (err) {
      console.log(err);
    }

    table.innerHTML = tableHtml;
  }

【问题讨论】：

标签： javascript reactjs domcontentloaded

【解决方案1】：

之前的答案是正确的，因为 DOMContentLoaded 事件每页触发一次。当您导航时，它实际上并没有导航到其他页面，而是您在同一页面上，只是前一个组件正在卸载，而新组件正在安装。这就是为什么它是单页应用程序 (SPA)。

建议您使用 useEffect 挂钩，而不是使用此事件。

React.useEffect(()=>{
 fetch
      .get("http://localhost:9000/getClienti")
      .then((data) => loadHTMLTable(data["data"]));
  });
},[]) // empty array means this function has no dependency on any value and will be executed when the component is mounted on the dom.

或者通过将你的组件变成一个类来使用 componentDidMount 方法。

componentDidMount(){
fetch
      .get("http://localhost:9000/getClienti")
      .then((data) => loadHTMLTable(data["data"]));
  });
}

【讨论】：

非常感谢，现在我明白为什么 DOMContentLoaded 没有达到我的预期。我将第一个解决方案与 useEffect 一起使用并修复了它。再次感谢您，我与这个问题斗争了一段时间。

【解决方案2】：

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

来自MDN web docs

【讨论】：