如何在MUI X Data Grid v5.6.1行内添加可跳转至编辑页面并获取行数据及ID的更新按钮

我来帮你搞定这个问题！你现在的核心问题是点击按钮时没拿到当前行的数据，而且不知道怎么带着数据跳转到编辑页面，我给你一步步捋清楚：

第一步：给按钮传递当前行的数据 #

你现在的onClick={updateHandler}没有传递任何参数，所以handler里拿不到行数据。修改renderCell里的按钮点击事件，把当前行的完整对象传进去：

{
  field: "update",
  align:"left",
  headerAlign: "left",
  headerName: "Update",
  renderCell: (cellValues) => {
    // 用箭头函数包裹，把当前行的row对象传递给handler
    return (
      <Button 
        pl={2} 
        onClick={() => updateHandler(cellValues.row)} 
        variant="contained" 
        color="primary"
      >
        Update
      </Button>
    )
  }
}

这里的cellValues.row就是当前行的完整数据对象，包含你需要的_id和其他所有字段。

第二步：修改updateHandler处理跳转 #

假设你用的是React Router v6（大部分React项目的标配），先导入useNavigate钩子，然后在handler里拿到行数据后，跳转到编辑页面，同时把数据带过去：

import { useNavigate } from 'react-router-dom';

// 在组件内部初始化navigate
const navigate = useNavigate();

const updateHandler = (rowData) => {
  console.log("当前行的数据：", rowData);
  // 方案1：把ID放在URL参数里，编辑页面通过useParams获取（推荐，URL更直观）
  navigate(`/edit/${rowData._id}`);
  
  // 方案2：把完整行数据通过state传递（适合数据量不大的场景）
  // navigate('/edit', { state: { row: rowData } });
};

如果用方案2，在编辑页面可以这样获取数据：

import { useLocation } from 'react-router-dom';

const EditPage = () => {
  const location = useLocation();
  const rowData = location.state?.row;
  // 用rowData渲染你的编辑表单即可
};

完整代码示例（整合后） #

import { DataGrid } from '@mui/x-data-grid';
import { Button } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const YourComponent = () => {
  const navigate = useNavigate();
  const adminStorage = /* 你的数据数组 */;
  const classes = /* 你的样式对象 */;

  const updateHandler = (rowData) => {
    console.log("获取到的行数据：", rowData);
    // 跳转到编辑页面，这里用URL参数的方式
    navigate(`/edit/${rowData._id}`);
  };

  const columns = [
    // 你的其他列配置...
    {
      field: "update",
      align:"left",
      headerAlign: "left",
      headerName: "Update",
      renderCell: (cellValues) => {
        return (
          <Button 
            pl={2} 
            onClick={() => updateHandler(cellValues.row)} 
            variant="contained" 
            color="primary"
          >
            Update
          </Button>
        )
      }
    }
  ];

  return (
    <DataGrid 
      rows={adminStorage} 
      columns={columns} 
      autoPageSize 
      getRowId={(logistics) => logistics._id } 
      autoHeight 
      headerHeight={60} 
      pageSize={100} 
      className={classes.root} 
    />
  );
};

export default YourComponent;

关键说明 #

• cellValues对象里的row属性是MUI DataGrid提供的便捷属性，直接就能拿到当前行的完整数据，不用自己去拼接或提取。
• 如果你的项目不用React Router，也可以根据项目的路由方案调整跳转逻辑，核心都是先拿到rowData，再带着数据/ID跳转到编辑页。

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