MUI DataGrid renderCell自定义内容异常及内部setState问题

自定义列内MACID值不显示问题排查 #

问题根因 #

• 泛型配置错误：GridRenderCellParams的第一个泛型参数为整行数据的类型，第二个参数才是当前单元格的值类型。你传入<String>作为泛型后，TS类型推导完全失效，误导你认为params.value是带macid属性的对象。
• 取值逻辑错误：列配置的field为macid时，params.value拿到的就是当前行macid字段对应的原始值，也就是你存入的字符串类型设备ID，属于基础类型，不存在.macid属性。访问params.value.macid会得到undefined，所以标签包裹时文本位置渲染为空。
• 你提到“直接返回params.value.macid时MACID可正常展示”属于测试时的写法偏差：JS中访问字符串值的不存在属性永远返回undefined，不可能渲染出有效文本，实际能正常显示的写法本质是直接返回了params.value本身。

修复方案 #

修正泛型定义和取值逻辑，同时修正a标签默认跳转的问题，推荐更符合React Router逻辑的写法：

import { Link } from 'react-router-dom';
// 列配置
const columns = [
  { 
    field: 'macid', 
    headerName: 'MACID', 
    width: 250,
    // 泛型按<行类型, 单元格值类型>传入
    renderCell: (params: GridRenderCellParams<
      {id: number, macid: string, cpu: number, ram: number, disk: number, temperature: number},
      string
    >) => (
      <strong>
        {/* 直接取params.value就是MACID字符串，无需额外取属性 */}
        {params.value}
        {/* 用React Router的Link做跳转更合理，不会触发页面刷新；如果用a标签必须阻止默认跳转行为 */}
        <Link 
          to={`/device/detail/${params.value}`}
          style={{ marginLeft: 8 }}
        >
          GO
        </Link>
      </strong>
    ) 
  },
  // 其余列配置
]

行数据构造的隐藏问题 #

你在组装温度字段时存在拼写错误：判断空值时读取的是props.statsData[x].temperature，实际赋值时读取的是props.statsData[x].temprature（单词拼写少了字母p），会导致温度值永远取到undefined，经parseInt转换后得到NaN，建议修正拼写保持字段名一致。

renderCell内禁止直接设置state的原因 #

• renderCell属于DataGrid渲染阶段同步执行的方法，和React组件渲染流程同步。React明确禁止在渲染过程中直接调用state更新函数，否则会触发渲染→更新state→重渲染→再次执行renderCell→再次更新state的死循环，最终导致页面崩溃。
• DataGrid默认开启虚拟滚动优化，单元格滚动出可视区、重新回到可视区时都会重复执行renderCell重绘，如果在renderCell内直接写state更新逻辑，会触发大量无意义的重渲染，带来严重的性能卡顿。
• renderCell的执行时机由DataGrid内部管控，不完全跟随外层组件的渲染周期，直接在内部更新外层state很容易触发闭包陷阱，拿到过期的状态值，导致业务逻辑异常。

如果需要通过单元格交互更新状态，必须把state更新逻辑放到用户主动触发的事件回调（如onClick、onChange）中，不能直接写在renderCell的同步执行逻辑里。

内容的提问来源于stack exchange，提问作者Kyle Andrew