标题重写为："Mui数据表格返回的行号为NaN"

Question

<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); // 添加这一行 返回

{(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” }]} >>

</> ）； };</pre>

导出默认NewsTablee;}

<p>返回行号为nan</p>

Answer 1

作为良好的实践，我建议像这样重新定义列：

{
      field: "_id",
      headerName: "no",
      flex: 0.5,
      type: 'number', valueGetter: (params) =>  `${params.row.index + 1}`
    },

另外，我假设{news}对象确实有一个index属性，它是一个数字。