MUI X DataGridPro多行列单字段批量编辑问题求助

问题分析 #

你当前代码里有几个明显问题导致表格无法自动更新：

• 用map查找选中行逻辑冗余且效率低，应该用find直接定位目标行
• body.reviewed()是错误写法，若values.reviewed是布尔值，调用函数会直接报错，直接用values.reviewed即可
• 循环内多次调用updateRows，不仅性能差，还可能因异步时序问题导致更新不生效
• 不必要的Promise嵌套，axios本身返回Promise，无需额外包装

修正后的代码示例 #

// 批量收集需要更新的行数据
const updatedRows = props.selectionModel.map(id => {
  const row = props.data.find(t => t.id === id);
  return {
    id: row.id,
    reviewed: values.reviewed // 直接使用布尔值，不要加()
  };
});

// 一次性调用updateRows更新表格，减少API调用次数
if (props.apiRef.current) {
  props.apiRef.current.updateRows(updatedRows);
}

// 批量发起后端请求（用Promise.all优化请求效率）
const updateRequests = props.selectionModel.map(id => {
  const row = props.data.find(t => t.id === id);
  const body = {
    id: row.id,
    reviewed: values.reviewed
  };
  return axios.put(`${urlValue.urlValue}/setAssetStigVulnStatusEntry`, body, options);
});

Promise.all(updateRequests)
  .catch(error => console.log(error));

关键注意事项 #

• 确保apiRef正确传递：在DataGridPro组件中通过useGridApiRef()创建apiRef实例，再作为props传给Dialog组件：

  const apiRef = useGridApiRef();
  // ...
  <DataGridPro apiRef={apiRef} checkboxSelection {...其他属性} />
  <你的Dialog组件 apiRef={apiRef} selectionModel={selectionModel} data={data} />
  

• 避免异步冲突：如果需要确保表格数据与后端完全同步，可以在Promise.all的then回调中调用apiRef.current.refresh()刷新表格
• 数据源驱动更新：如果你是通过状态管理维护表格数据源（比如useState），也可以直接更新数据源数组，DataGridPro会自动监听变化并刷新

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