標題重寫為："Mui資料表傳回的行號為NaN"
<p><pre class="brush:php;toolbar:false;">從「react」匯入 React, { useState, useEffect };
從“axios”導入 axios；
從“socket.io-client”導入 io；
從“@mui/x-data-grid”導入{ DataGrid }；
從“../NaveBar/NaveBar”導入 NaveBar；
從“../SideBar/SideBar”導入側欄；
導入“./NewsTable.scss”；
const socket = io(“http://localhost:5000/”);
const NewsTablee = () =>; {
const [新聞，setNews] = useState([]);
//更新新聞deeebd
useEffect(() => {
const fetchData = async () =>; {
嘗試 {
const allnews = wait axios.get(“http://localhost:5000/api/news”);
setNews(allnews.data.Date);
} 捕獲（錯誤）{
控制台.log(錯誤);
}
};
socket.on(“updateNewsTable”, () => {
獲取數據（）；
});
}， [訊息]）;
useEffect(() => {
軸
.get(“http://localhost:5000/api/news”)
.then((s) => {
setNews(s.data.Date);
})
.catch((呃) => {
控制台.log(呃);
});
}, []);
const 訊息 = () => {
socket.emit("一則新聞更新", "一則新聞更新");
};
常量列 = [
{
字段：“_id”，
標題名稱：“否”，
彈性：0.5，
renderCell: (參數) => {
console.log(params.row.Index 1); // 新增這一行
return
{(params.row.index 1).toString()}
;
;
},
},
{ 欄位：“標題”， headerName：“標題”，flex：3，可排序：true }，
{ 欄位： “createdAt”， headerName：“createdAt”，flex：2 }，
{ 欄位：“使用者名稱”， headerName：“使用者名稱”，flex：1 }，
{ 欄位： “恢復”， headerName：“恢復”，flex：1 }，
{ 字段：“語言”， headerName：“語言”，flex：1 }，
{ field: "ProtectionLevel", headerName: "Protection Level", flex: 1 },
{ 欄位：“優先權”， headerName：“優先權”，flex：1 }，
{ 字段：“媒體”， headerName：“媒體”，flex：1 }，
];
返回 （
<>
<中殿酒吧>>
<側邊欄/>
;
;
<按鈕
onClick={訊息}
style={{ 高度: 30, 寬度: 30 }}>;
<資料網格
行={新聞}
列={列}
getRowId={(行)=>;行._id}
sortModel={[{ 欄位：“createdAt”，排序：“desc” }]}
>>
;
</div>
</div>
</>
);
};</pre>
<p>匯出預設NewsTablee;}</p>
<p>回傳行號為nan</p>
全部回覆(1)我來回復
P粉5936497152023-09-03 10:19:40
作為良好的實踐，我建議像這樣重新定義列：
{
field: "_id",
headerName: "no",
flex: 0.5,
type: 'number', valueGetter: (params) => `${params.row.index + 1}`
},
另外，我假設{news}物件確實有一個index屬性，它是一個數字。
回覆
0
