Der Titel wird wie folgt umgeschrieben: „Die von der Mui-Datentabelle zurückgegebene Zeilennummer ist NaN.“
<p><pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react";
Axios aus „Axios“ importieren;
io aus „socket.io-client“ importieren;
import { DataGrid } aus "@mui/x-data-grid";
NaveBar aus „../NaveBar/NaveBar“ importieren;
importiere SideBar aus „../SideBar/SideBar“;
import "./NewsTable.scss";
const socket = io("http://localhost:5000/");
const NewsTablee = () => {
const [news, setNews] = useState([]);
//Neuigkeiten aktualisieren deeebd
useEffect(() => {
const fetchData = async () => {
versuchen {
const allnews = waiting axios.get("http://localhost:5000/api/news");
setNews(allnews.data.Date);
} Catch (Fehler) {
console.log(error);
}
};
socket.on("updateNewsTable", () => {
Daten abrufen();
});
}, [Nachricht]);
useEffect(() => {
Axios
.get("http://localhost:5000/api/news")
.then((s) => {
setNews(s.data.Date);
})
.catch((er) => {
console.log(er);
});
}, []);
const message = () => {
socket.emit("eine aktualisierte Nachricht", "eine aktualisierte Nachricht");
};
const columns = [
{
Feld: "_id",
headerName: "nein",
Flex: 0,5,
renderCell: (params) => {
console.log(params.row.Index + 1); // Diese Zeile hinzufügen
return <div>{(params.row.index + 1).toString()}</div>
;
},
},
{ field: "Title", headerName: "Title", flex: 3, sortable: true },
{ field: "createdAt", headerName: "createdAt", flex: 2 },
{ field: "UserName", headerName: "UserName", flex: 1 },
{ field: "Resurce", headerName: "Resurce", flex: 1 },
{ field: "Language", headerName: "Language", flex: 1 },
{ field: "ProtectionLevel", headerName: "Protection Level", flex: 1 },
{ field: "priority", headerName: "Priority", flex: 1 },
{ field: "Media", headerName: "Media", flex: 1 },
];
zurückkehren (
<>
<NaveBar />
<SideBar />
<div className='content-wrapper' style={{ minHeight: "1172.56px" }}>
<div className='NewsTableContainer'>
<div className='headrt'>
<-Taste
onClick={message}
style={{ height: 30, width: 30 }}></button>
</div>
<div style={{ height: "570px", width: "100%" }} className='newsTable'>
<DataGrid
rows={news}
columns={columns}
getRowId={(row) => row._id}
sortModel={[{ field: "createdAt", sort: "desc" }]}
/>
</div>
</div>
</div>
</>
);
};</pre>
<p>导出默认NewsTablee;}</p>
<p>返回行号为nan</p>
