React中能否直接将类实例对象作为Material-Table的data数据源

第一步：排查官方给出的三类常规触发原因 #

• 版本不匹配校验
  执行以下命令检查react和react-dom版本是否一致：

npm ls react
npm ls react-dom

如果两个包版本号不同，统一升级为相同版本即可解决。

• Hook使用规则校验
  检查你的ProductImpl类、以及它实现的Product接口关联的所有代码，是否存在Hook调用逻辑：Hook只能在函数组件顶层、自定义Hook内部调用，不能在普通类的构造函数、类方法、普通工具函数里调用。你触发这个报错大概率是你在实例化ProductImpl的时候，类内部逻辑中意外调用了Hook导致的。
• 多份React副本校验
  执行npm ls react如果输出了多个不同版本的react包，说明项目中存在多份React副本，删除项目下的node_modules文件夹、package-lock.json（或yarn.lock）文件后重新执行npm install（或yarn install）即可解决。

第二步：Material-Table兼容处理 #

如果上述排查都没有问题，就是Material-Table自身对自定义类实例的兼容问题：
Material-Table内部处理数据源时会默认做浅拷贝、属性遍历操作，自定义类的实例不可枚举属性或者原型链会干扰内部逻辑，你可以在传入数据时将类实例转换为普通JS对象即可，修改state初始化代码为：

const [data, setData] = useState([{...new ProductImpl(1, "productName", "description of product", 12.50, new Date(), 1)}]);

后续通过setData更新数据时，也统一将类实例转成普通对象传入即可。

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