<p><pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react";
import axios from "axios";
import io from "socket.io-client";
import { DataGrid } from "@mui/x-data-grid";
import NaveBar from "../NaveBar/NaveBar";
import SideBar from "../SideBar/SideBar";
import "./NewsTable.scss";
const socket = io("http://localhost:5000/");
const NewsTablee = () => {
const [news, setNews] = useState([]);
//update news deeebd
useEffect(() => {
const fetchData = async () => {
try {
const allnews = await axios.get("http://localhost:5000/api/news");
setNews(allnews.data.Date);
} catch (error) {
console.log(error);
}
};
socket.on("updateNewsTable", () => {
fetchData();
});
}, [news]);
useEffect(() => {
axios
.get("http://localhost:5000/api/news")
.then((s) => {
setNews(s.data.Date);
})
.catch((er) => {
console.log(er);
});
}, []);
const message = () => {
socket.emit("a news updated", "a news updated");
};
const columns = [
{
field: "_id",
headerName: "no",
flex: 0.5,
renderCell: (params) => {
console.log(params.row.Index + 1); // add this line
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 },
];
return (
<>
<NaveBar />
<SideBar />
<div className='content-wrapper' style={{ minHeight: "1172.56px" }}>
<div className='NewsTableContainer'>
<div className='headrt'>
<button
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>
1
948
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
作为良好的实践，我建议像这样重新定义列：
{ field: "_id", headerName: "no", flex: 0.5, type: 'number', valueGetter: (params) => `${params.row.index + 1}` },另外，我假设{news}对象确实有一个index属性，它是一个数字。