MUI X Data Grid行号返回NaN问题技术求助

核心原因：错误获取行索引 #

你在自定义行号列时，错误尝试从params.row.index获取索引，但后端返回的news数据中并没有index字段，导致params.row.index为undefined，计算undefined + 1就会得到NaN。另外你console.log里写的params.row.Index（大写I）和渲染时的params.row.index（小写i）不一致，也是无效的。

正确解决方案 #

MUI X Data Grid的renderCell参数本身提供了params.index，代表当前行在表格中的渲染索引，直接使用它即可：

修改行号列的renderCell：

renderCell: (params) => {
  console.log(params.index + 1); // 正确获取行索引
  return <div>{(params.index + 1).toString()}</div>;
}

额外修复：避免无限循环 #

你的第一个useEffect依赖数组包含news，但内部fetchData会调用setNews修改news，这会导致useEffect无限触发，消耗资源。需要调整依赖数组并添加清理逻辑：

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);
  
  // 清理socket监听，避免内存泄漏
  return () => {
    socket.off("updateNewsTable", fetchData);
  };
}, []); // 移除news依赖

其他注意点 #

• 确认后端返回的allnews.data.Date确实是正确的数组格式，避免news状态不是数组导致表格渲染异常。
• getRowId={(row) => row._id}确保每行有唯一标识，这个配置是正确的。

内容的提问来源于stack exchange，提问作者javad afshar