Material-React-Table点击编辑按钮无法获取行数据求助

点击Material-React-Table每行的「铅笔」编辑按钮时，希望获取该行的所有列数据（如email、id、name等），但每次console.log都返回undefined，尝试过使用row参数但未解决问题。

原代码 #

import React,{Component ,useContext,useMemo,useState,useEffect,forwardRef } from 'react';
import { UserContext } from '../providers/userContext';
import { ProductService } from '../services/productService';
import MaterialReactTable from 'material-react-table';
import Edit from '@material-ui/icons/Edit';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';
//import Box from '../props/box';
export default function TableUsers() {
  
  const { user } = useContext(UserContext);
  const { getAllUsers } = ProductService()
  const [tableData,setTableData ] = useState([{}]) 
  
  const tableIcons = {  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />)}

  useEffect(() => {
    getAllUsers(user.token)
    .then((response) => {
      setTableData(response.users) ;  // 此处通过API请求获取数据
    })
    .catch();
  }, []);
  
  //should be memoized or stable
  const columns = useMemo(
    () => [
      {
        accessorKey: 'email', //access nested data with dot notation
        header: 'EMAIL',
      },
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorKey: 'name', //normal accessorKey
        header: 'NAME',
      },
    ], [],
  );


  return <MaterialReactTable 
    icons={tableIcons}
    columns={columns} 
    data={tableData} 
    enableRowActions={true}
    renderRowActions={({ row, table }) => (
      <Box>
        <IconButton onClick={(e, data)=> console.log( data.email)}>  {/* 问题所在 */}
          <Edit />
        </IconButton>
      </Box>
    )}
    getRowId={(originalRow) => {}} 
  />;
}

解决方案 #

问题出在以下几个地方，逐一修正即可：

1. IconButton的onClick参数错误
   IconButton的onClick回调只接收一个事件参数e，不存在第二个data参数。你需要使用renderRowActions回调提供的row对象来获取行数据。

2. 获取行原始数据的方式错误
   row对象中的原始数据存储在row.original属性里，所以要获取该行的email、id等字段，应该访问row.original.email、row.original.id。

3. getRowId函数未正确返回唯一标识
   getRowId需要返回每行的唯一ID（比如originalRow.id），否则表格内部的行标识会出问题，可能导致数据关联错误。

4. 初始state优化
   初始tableData设为[{}]会导致表格渲染空行，改成[]更合理。

修正后的代码 #

import React,{useContext,useMemo,useState,useEffect,forwardRef } from 'react';
import { UserContext } from '../providers/userContext';
import { ProductService } from '../services/productService';
import MaterialReactTable from 'material-react-table';
import Edit from '@material-ui/icons/Edit';
import IconButton from '@mui/material/IconButton';
import Box from '@mui/material/Box';

export default function TableUsers() {
  
  const { user } = useContext(UserContext);
  const { getAllUsers } = ProductService()
  const [tableData,setTableData ] = useState([])  // 初始化为空数组
  
  const tableIcons = {  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />)}

  useEffect(() => {
    getAllUsers(user.token)
    .then((response) => {
      setTableData(response.users) ;
    })
    .catch(err => console.error('获取用户数据失败:', err)); // 加上错误捕获
  }, [user.token]); // 依赖项添加user.token，避免闭包问题
  
  const columns = useMemo(
    () => [
      {
        accessorKey: 'email',
        header: 'EMAIL',
      },
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorKey: 'name',
        header: 'NAME',
      },
    ], [],
  );


  return <MaterialReactTable 
    icons={tableIcons}
    columns={columns} 
    data={tableData} 
    enableRowActions={true}
    renderRowActions={({ row }) => (
      <Box>
        <IconButton onClick={()=> console.log(row.original)}> {/* 直接打印整个行数据 */}
          <Edit />
        </IconButton>
      </Box>
    )}
    getRowId={(originalRow) => originalRow.id}  // 返回唯一ID
  />;
}

说明 #

• 点击编辑按钮时，console.log(row.original)会打印该行的所有原始数据，你可以从中提取需要的字段（如row.original.email）。
• 修正了useEffect的依赖项，添加user.token确保token变化时重新请求数据。
• 加上了错误捕获，方便调试API请求问题。

内容的提问来源于stack exchange，提问作者Alberto Tomas Martin