React MUI Data Grid单元格编辑失效问题求助

方案1：renderEditCell 输入后值重置问题 #

问题根源 #

1. 未调用setAssignmentData更新组件状态，仅修改数组副本，DataGrid无法感知数据变化
2. renderEditCell中TextField的value绑定初始params.value，未同步实时输入值
3. 自定义handleCommentChange未正确更新状态并同步DataGrid编辑上下文

修正代码 #

// 正确的状态更新函数
const handleCommentChange = (rowId, field, newValue) => {
  setAssignmentData(prevRows => 
    prevRows.map(row => 
      row.id === rowId ? {...row, [field]: newValue} : row
    )
  );
};

// 列配置修正
{
  field: 'teacher_comment',
  headerName: 'Teacher Comment',
  width: 300,
  editable: true,
  renderEditCell: (params) => {
    // 使用当前行的最新值作为输入框值
    const currentValue = params.row[params.field];
    return (
      <TextField
        variant="outlined"
        size="small"
        value={currentValue}
        fullWidth
        onChange={(e) =>
          handleCommentChange(params.row.id, params.field, e.target.value)
        }
        // 同步DataGrid编辑状态，避免焦点丢失
        onFocus={() => params.api.setEditCellValue({
          id: params.id,
          field: params.field,
          value: currentValue
        })}
      />
    );
  },
}

方案2：自定义编辑组件 API 错误问题 #

问题根源 #

1. 自定义组件内单独创建useGridApiRef无效，需传递DataGrid的apiRef给组件
2. setEditCellValue已废弃，新版推荐直接更新数据源状态
3. 组件props传递错误，应解构params而非传递props={params}

修正代码 #

// 父组件中创建apiRef
const apiRef = useGridApiRef();

// 自定义编辑组件
function CustomEditComponent({ id, field, value, apiRef, hasFocus }) {
  const ref = React.useRef();

  React.useLayoutEffect(() => { 
    if (hasFocus) {
      ref.current.focus();
    }
  }, [hasFocus]);

  const handleValueChange = (event) => {
    const newValue = event.target.value;
    // 不可变更新数据源状态
    setAssignmentData(prevRows => 
      prevRows.map(row => 
        row.id === id ? {...row, [field]: newValue} : row
      )
    );
    // 同步DataGrid编辑状态
    apiRef.current.setEditCellProps({ id, field, props: { value: newValue } });
  };

  return <input ref={ref} type="text" value={value} onChange={handleValueChange} />;
}

// 列配置修正
{
  field: 'teacher_comment',
  headerName: 'Teacher Comment',
  width: 300,
  editable: true,
  renderEditCell: (params) => {
    return (
      <CustomEditComponent 
        id={params.id}
        field={params.field}
        value={params.row[params.field]}
        apiRef={apiRef}
        hasFocus={params.hasFocus}
      />
    );
  },
}

// DataGrid添加apiRef属性
<DataGrid
  apiRef={apiRef}
  // 其他原有属性...
/>

方案3：默认编辑值不即时更新问题 #

问题根源 #

handleEditCellChange仅修改数组副本，未调用setAssignmentData更新组件状态，DataGrid无法重新渲染展示新值

修正代码 #

// 正确的编辑停止处理函数
const handleEditCellChange = (params) => {
  const { id, field, value } = params;
  // 不可变更新数据源状态
  setAssignmentData(prevRows => 
    prevRows.map(row => 
      row.id === id ? {...row, [field]: value} : row
    )
  );
  // 可选：调用API更新服务器数据
  // fetch('/api/update-comment', {
  //   method: 'POST',
  //   body: JSON.stringify({ id, field, value })
  // });
};

// DataGrid配置修正
<DataGrid
  rows={AssignmentData}
  columns={columns}
  pageSize={15}
  rowHeight={50}
  checkboxSelection={false}
  pagination={true}
  autoPageSize={false}
  sortModel={sortModel}
  onSortModelChange={(newModel) => setSortModel(newModel)}
  // 实时监听编辑变化，可选
  onEditCellChange={(params) => {
    setAssignmentData(prevRows => 
      prevRows.map(row => 
        row.id === params.id ? {...row, [params.field]: params.value} : row
      )
    );
  }}
  // 编辑停止时做最终处理
  onCellEditStop={(params) => handleEditCellChange(params)}
  disableNavigation={true}
/>

通用注意事项 #

• 不可变更新状态：必须使用map或展开运算符创建新数组，不能直接修改原数组，否则React无法感知变化
• 同步DataGrid状态：自定义编辑组件时需和DataGrid的编辑上下文同步，避免焦点丢失或值不一致
• API版本匹配：确认使用的Material-UI DataGrid版本，旧版API已废弃，优先使用官方推荐的状态更新方式

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