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

Question

所以就像我提到的那样，DOMContentLoaded 中的代码仅在我刷新页面时运行，但如果我导航到所述页面，我的 table 中的数据将不再显示。我在这里看到了一个非常相似的 post ()，但我无法弄清楚我自己的代码的解决方案。这是我的代码的样子：

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;
  }

Answer 1

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

来自MDN web docs

Answer 2

之前的答案是正确的，因为 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 方法使您的组件成为 class。

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

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

DOMContentLoaded doesn't work if i navigate to the page, only on refresh

javascript

reactjs

domcontentloaded