React MUI DataGrid点击行按钮获取对应行_id及点击事件加载即触发问题问询

问题根因 #

• 页面加载时按钮点击事件自动触发：你直接给onClick属性赋值了console.log(params.row._id)的执行结果，而非可调用的函数引用，组件渲染生成每行按钮时就会自动执行这段打印逻辑。
• 无法获取点击行对应_id：上述打印逻辑是遍历每行生成按钮的阶段同步执行的，所以会一次性输出所有行的_id，不是点击时才读取当前行数据。

修复方案 #

修改actions列的getActions配置，给onClick传入箭头函数包裹的处理逻辑，仅在点击按钮时才执行逻辑、读取当前行的_id值：

{
  field: 'actions',
  type: 'actions',
  headerName: 'Actions',
  flex: 0.2,
  getActions: (params) => [
    <IconButton onClick={() => console.log(params.row._id)}>
      <EditIcon />
    </IconButton>,
  ],
}

如果需要添加更多业务处理逻辑，可以单独封装处理函数，完整示例如下：

function generateRows(users) {
  return users.map((user) => (({
    _id, userName, email, fullName, status,
  }) => ({
    _id, userName, email, fullName, status,
  }))(user));
}

export default function UserControlTable() {
  const [data, setData] = useState({
    users: [],
  });

  // 封装编辑操作处理函数
  const handleEditUser = (userId) => {
    // 此处编写后续业务逻辑，比如跳转编辑页、发起修改请求等
    console.log('当前操作的用户ID：', userId)
  }

  // 建议将columns移到组件内部定义，方便调用组件内的状态和方法
  const columns = [
    {
      field: '_id', headerName: 'id', type: 'number', flex: 0.9,
    },
    {
      field: 'userName', headerName: 'Username', flex: 0.7,
    },
    {
      field: 'email', headerName: 'email', flex: 0.7,
    },
    {
      field: 'fullName', headerName: 'Full name', flex: 0.7,
    },
    {
      field: 'status', headerName: 'Status', flex: 0.7,
    },
    {
      field: 'actions',
      type: 'actions',
      headerName: 'Actions',
      flex: 0.2,
      getActions: (params) => [
        <IconButton onClick={() => handleEditUser(params.row._id)}>
          <EditIcon />
        </IconButton>,
      ],
    },
  ];

  useEffect(() => {
    const fetchUsers = async () => {
      const users = await axios.get(process.env.REACT_APP_API_URL + USER_LIST);
      setData({ users: generateRows(users.data)});
    };
    fetchUsers();
  }, []);

  return (
    <Container>
      <DataGrid
        getRowId={(row) => row._id}
        rows={data.users}
        columns={columns}
        checkboxSelection
        column
      />
    </Container>
  );
}

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