修改mui-datatables数据时触发Objects are not valid as a React child报错

• 核心原因是你修改后的deviceClass字段为对象数组类型，没有给该字段配置自定义渲染规则，MUIDatatable 默认会直接渲染字段原始值，而 React 不允许直接将对象作为子元素渲染
• 你之前能正常运行的用例中，deviceClass是字符串类型，可以直接当作文本渲染，所以不会触发报错
• 其他使用数组对象格式数据的表格能正常运行，是因为那些表格的对应字段已经配置了自定义渲染逻辑（比如MUIDatatable的customBodyRender配置项），提前把数组/对象转换成了React可识别的可渲染内容（比如字符串、React组件等）

解决方案示例 #

在columns配置中为deviceClass字段添加自定义渲染逻辑，取出对象中需要展示的字段即可，参考代码：

const columns = [
  // 其他字段的配置省略
  {
    name: "deviceClass",
    label: "设备类别",
    options: {
      customBodyRender: (deviceClassArr) => {
        // 取出数组中每个对象的name字段，用顿号拼接展示
        return deviceClassArr.map(item => item.name).join("、");
        // 如果需要渲染为标签组，也可以返回对应组件：
        // return deviceClassArr.map(item => <Chip key={item.name} label={item.name} size="small" />)
      }
    }
  }
]

内容的提问来源于stack exchange，提问作者Neal Rogers