如果我导航到页面,DOMContentLoaded 不起作用,仅在刷新时
DOMContentLoaded doesn't work if i navigate to the page, only on refresh
所以就像我提到的那样,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;
}
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析时触发,无需等待样式表、图像和子框架完成加载。
之前的答案是正确的,因为 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 中的代码仅在我刷新页面时运行,但如果我导航到所述页面,我的 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;
}
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析时触发,无需等待样式表、图像和子框架完成加载。
之前的答案是正确的,因为 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"]));
});
}