Material-UI DataGrid：编辑N/A替代NaN的单元格时遇警告问题

你遇到的问题本质是：数字类型列的编辑器使用的是type="number"的输入框，而valueGetter返回的"N/A"字符串被直接传入这个输入框，导致浏览器抛出解析警告。

解决这个问题的关键是利用DataGrid提供的editValueGetter属性——这个属性专门负责为编辑模式下的单元格提供初始值，完全独立于用于展示的valueGetter。

只需在你的数字列配置中添加editValueGetter，将底层的NaN（或需要的默认值）返回给编辑器即可：

const columns: GridColumns = [
  { field: "id", headerName: "Id", width: 180 },
  {
    field: "data",
    headerName: "Value",
    type: "number",
    editable: true,
    valueGetter: (params) => {
      const val = params?.value?.value;
      return val && !Number.isNaN(val) ? val : "N/A";
    },
    // 新增editValueGetter，为编辑器提供合法数字值
    editValueGetter: (params) => {
      const val = params?.value?.value;
      return Number.isNaN(val) ? NaN : val;
      // 如果希望默认显示0而非空，可替换为：return Number.isNaN(val) ? 0 : val;
    },
    valueSetter: (params) => {
      const newValue = Number(params.value);
      params.row["data"].value = newValue;
      return { ...params.row };
    }
  }
];

原理说明 #

• valueGetter仅负责单元格的展示逻辑，将NaN转为"N/A"给用户看；
• editValueGetter则在进入编辑模式时生效，直接从底层数据中取出原始值（NaN）或转为合法数字（如0），传递给数字输入框，避免字符串解析错误；
• valueSetter依然正常处理用户输入的存储逻辑，不影响原有编辑功能。

这样修改后，编辑显示为"N/A"的单元格时，控制台不会再抛出警告，同时展示和编辑功能都能正常工作。

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