如何解决material-table传入数据源后行数正确但列值空白的问题

问题原因 #

material-table完全支持对象数组作为数据源，你出现列内容空白的核心原因是：你配置的columns的field属性值，和数据源对象的实际属性名不匹配。
你当前定义的3个列里，只有TDC字段是你的数据源中存在的，另外两个字段surname、birthYear在你提供的数据源示例中完全不存在，自然无法读取到值显示。

解决方法 #

1. 调整columns配置，将每个列的field值和数据源的属性名一一对应，大小写必须完全一致，示例如下：

// 按需配置你要展示的列，field必须和数据源的属性名完全匹配
const columns = [
  { title: 'TDC', field: "TDC" },
  { title: '客户名称', field: 'CustName' },
  { title: '成本', field: 'Cost', type: 'numeric' },
  { title: '创建时间', field: 'CreatedOn', type: 'datetime' },
  // 更多列继续按这个规则添加即可
];

2. 额外检查项：确认传入的this.props.reportList是JS对象数组，而非JSON字符串。如果是接口返回的字符串格式，需要先调用JSON.parse()转换为对象数组后再传入data属性。你可以在render方法中加一行日志确认格式：

render() {
  // 正常应该输出 true 和对应的对象数组
  console.log('数据源格式是否正确：', Array.isArray(this.props.reportList), this.props.reportList)
  return (
    <MaterialTable
      {/* 原有配置不变 */}
    />
  )
}

另外你构造函数中定义的ReportList状态没有在代码中用到，属于冗余代码，可以直接删除。

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