MUI X Data Grid中renderEditCell后如何实现无刷新重渲染？

单元格编辑功能正常，但修改后必须刷新页面才能看到新值。尝试过apiRef.current.updateRows更新行数据、apiRef.current.forceUpdate强制更新，均未生效，求其他解决思路。

相关列配置代码 #

{
    flex: 0.15,
    minWidth: 100,
    field: 'status',
    headerName: 'Status',
    renderEditCell: renderSelectEditInputCell,
    editable: true,
    renderCell: ({ row }) => {
      return (
        <CustomChip
          label={statusString[row.Status]}
        />
      )
    }
  },

SelectEditInputCell组件代码 #

function SelectEditInputCell(props) {
  const { id, value, field } = props
  const apiRef = useGridApiContext()

  const handleChange = async event => {
    await axios
      .put(authConfig.defautlEndpoind + 'ABC/UpdateABCStatus', { Id: id, value: event.target.value })
      .then(async response => {
        apiRef.current.stopCellEditMode({ id, field })

        // apiRef.current.updateRows([{ id, field, value: event.target.value }])
        // apiRef.current.forceUpdate()
        // Router.reload(window.location.pathname) // force a page reload

      })
      .catch(error => {
        ...
      })

    apiRef.current.setEditCellValue({ id, field, value: event.target.value })
  }

  return (
    <Select value={value} onChange={handleChange} native autoFocus>
      <option value={null} disabled selected>
        Status
      </option>
      <option value={0}>Option 1</option>
      <option value={1}>Option 2</option>
      <option value={2}>Option 3</option>
    </Select>
  )
}

SelectEditInputCell.propTypes = {
  /**
   * The column field of the cell that triggered the event.
   */
  field: PropTypes.string.isRequired,
  /**
   * The grid row id.
   */
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  /**
   * The cell value.
   * If the column has `valueGetter`, use `params.row` to directly access the fields.
   */
  value: PropTypes.any
}

const renderSelectEditInputCell = params => {
  return <SelectEditInputCell {...params} />
}

已尝试的其他方法 #

apiRef.current.stopCellEditMode({ id, field })
apiRef.current.setEditCellValue({ id, field, value: event.target.value })
apiRef.current.refreshCell(id, field)
apiRef.current.forceUpdate([id]) // force update the specified row(s)
const updatedRow = { ...rows.find(row => row.id === id), [field]: event.target.value }
const updatedRows = rows.map(row => (row.id === id ? updatedRow : row))
setRows(updatedRows)

解决思路 #

核心问题定位 #

1. 字段名大小写不匹配：列配置中field是小写的'status'，但renderCell里渲染用的是row.Status（大写），这会导致网格更新后，渲染逻辑还是读取旧的字段值，自然看不到变化。
2. 数据更新逻辑错误：updateRows的调用方式不对，且你在请求完成后先退出编辑模式再尝试更新，同时冗余调用了setEditCellValue，打乱了网格的状态更新流程。

具体修正步骤 #

1. 统一字段名大小写
   将列配置的field改为和row对象中一致的'Status'，确保字段名完全匹配：

{
    flex: 0.15,
    minWidth: 100,
    field: 'Status', // 与row.Status保持一致
    headerName: 'Status',
    renderEditCell: renderSelectEditInputCell,
    editable: true,
    renderCell: ({ row }) => {
      return (
        <CustomChip
          label={statusString[row.Status]}
        />
      )
    }
  },

2. 正确更新行数据
   在接口请求成功后，先调用updateRows更新行数据，再退出编辑模式。注意传入的对象要包含行id和对应字段的新值：

const handleChange = async event => {
  const newValue = event.target.value;
  try {
    await axios.put(authConfig.defautlEndpoind + 'ABC/UpdateABCStatus', { Id: id, value: newValue });
    
    // 先更新行数据，触发网格重渲染
    apiRef.current.updateRows([{ id, Status: newValue }]);
    // 再退出编辑模式
    apiRef.current.stopCellEditMode({ id, field });
  } catch (error) {
    // 这里处理错误，比如提示用户更新失败
    console.error('更新状态失败:', error);
  }
}

3. 清理冗余代码
   不需要调用setEditCellValue、refreshCell或手动更新rows状态（如果是非受控模式），updateRows会自动触发网格的重渲染逻辑。如果你的网格是受控模式（通过rows prop传递数据），则需要更新rows状态，但要保证是不可变更新：

// 受控模式下更新rows状态
const updatedRows = rows.map(row => 
  row.id === id ? { ...row, Status: newValue } : row
);
setRows(updatedRows);

额外检查项 #

• 确认网格配置中设置了正确的行主键，比如rowId="id"，确保updateRows能正确定位到目标行。
• 检查statusString对象的键是否和newValue的类型匹配（比如newValue是数字类型，statusString的键也要是数字，不能是字符串）。

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