React中Material Table表格flag字段重复数据校验实现咨询

核心思路 #

直接在Material Table自带的字段校验逻辑中新增重复判断，同时可在新增、编辑行的回调里加二层校验，避免前端校验被绕过，校验时需要注意编辑场景下排除当前正在修改的行，避免把自身判定为重复。

具体修改步骤 #

1. 升级flag字段的validate校验 #

修改columns配置中flag字段的校验逻辑，新增重复判断：

const columns = [
  {
    title: "Type",
    field: 'flag', // 原代码的.trim()没必要，直接写字段名即可
    editable: 'onAdd',
    validate: rowData => {
      // 原有必填校验
      if(rowData.flag===undefined || /^ *$/.test(rowData.flag)){
        return 'Required'
      }
      // 新增重复校验
      const trimmedFlag = rowData.flag.trim()
      const isDuplicate = data.some(item => {
        // 编辑场景下排除当前行自身
        if (rowData.tableData?.id !== undefined && item.tableData.id === rowData.tableData.id) {
          return false
        }
        return item.flag?.trim() === trimmedFlag
      })
      if (isDuplicate) {
        return 'flag值不可重复'
      }
      return true
  }},
  // 剩余其他字段配置
];

2. 新增/编辑回调加二层校验（可选，安全性更高） #

为了避免前端校验被绕过，建议在addRowToTable和updateTableData里也加重复判断，不符合要求就拒绝提交：

新增行校验：

const addRowToTable = (newData) => {
  setActionPerformed(true)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const trimmedNewFlag = newData.flag.trim()
      const isDuplicate = data.some(item => item.flag?.trim() === trimmedNewFlag)
      if (isDuplicate) {
        alert('flag值不可重复，无法新增')
        reject()
        return
      }
      setData([...data, newData]);
      resolve();
    }, 300);
  })
}

编辑行校验：

因为你的flag字段配置了editable: 'onAdd'仅新增可编辑，编辑场景下不可修改flag，这部分可以不加，如果后续修改了可编辑权限建议加上：

const updateTableData = (newData, oldData) => {
  newData.shopId = selectedShop.value
  setActionPerformed(true)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const trimmedNewFlag = newData.flag.trim()
      const isDuplicate = data.some(item => {
        // 排除当前编辑的行
        if (item.tableData.id === oldData.tableData.id) return false
        return item.flag?.trim() === trimmedNewFlag
      })
      if (isDuplicate) {
        alert('flag值不可重复，无法修改')
        reject()
        return
      }
      const dataUpdate = [...data];
      const index = oldData.tableData.id;
      dataUpdate[index] = newData;
      setData([...dataUpdate]);
      resolve();
    }, 300)
  })
}

补充说明 #

如果需要忽略flag的大小写差异，把对比逻辑改成item.flag?.trim().toLowerCase() === trimmedFlag.toLowerCase()即可。

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