mui-datatables如何根据数据条件动态设置React表格accessor取值

mui-datatables的accessor字段除了传字符串字段名，还支持传入自定义取值函数，函数入参为当前行的完整数据对象，直接在函数内实现两个价格字段的有效值判断逻辑即可。

核心判断逻辑注意要兼容价格为0的合法场景，不能用非空简写判断（否则0会被误判为无效值），要通过类型校验+NaN校验识别有效数字：

• 优先判断fclPrice是否为有效数字（排除null、undefined、NaN）
• 若fclPrice有效直接返回，否则返回lclPrice的值
• 如果需要兼容两个价格都为空的场景，可以加兜底显示值

修改后的完整列配置代码如下：

const Datatable = [
  { Header: 'Name', accessor: 'name' }, 
  {
    Header: 'Price',
    accessor: (rowData) => {
      // 校验fclPrice是否为有效数字，兼容0值场景
      const isFclValid = typeof rowData.fclPrice === 'number' && !Number.isNaN(rowData.fclPrice);
      if (isFclValid) {
        return rowData.fclPrice;
      }
      // fclPrice无效时返回lclPrice，需要兜底可自行加判断，比如两个都无效返回'-'
      return rowData.lclPrice;
    }
  },
  { Header: 'Total', accessor: 'total' }  
];

效果验证 #

对应不同行数据的返回结果符合预期：

• 当fclPrice:100, lclPrice:null时，Price列取值为100
• 当fclPrice:null, lclPrice:100时，Price列取值为100
• 当fclPrice:0, lclPrice:null时，Price列取值为0，不会被误判为空值

提示：如果需要在列内做额外的价格格式化（比如加货币符号），可以直接在accessor函数里处理完再返回，也可以搭配列的customBodyRender属性做渲染层定制。

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