使用Material UI/React JS在另一组件展示Data Grid选中行数据

onSelectionModelChange 本身设计就是只返回选中行的ID数组，你只需要用返回的ID从已有的rows数据中匹配到完整行数据即可，具体修改步骤如下：

步骤1：新增状态存储选中行数据 #

在ProductTable组件中新增状态用于存储选中的完整行数据，后续可以把这个状态传递给其他需要展示的组件：

const ProductTable = () => {
  const [rowData, setRowData] = React.useState([]);
  const [rows, setRows] = React.useState(rowData);
  // 新增：存储选中的完整行数据
  const [selectedRow, setSelectedRow] = React.useState(null);

  // 原有useEffect、columns等代码保持不变...
}

步骤2：修改XGrid配置，添加选中事件处理 #

修正XGrid的错误配置，添加选中事件逻辑，开启单选模式：

<XGrid 
  checkboxSelection
  disableMultipleSelection={true} // 开启单选模式，禁止多选
  components={{ Toolbar: FilteringToolbar }}
  rows={rows}
  columns={columns}
  {/* 去掉原来多余的{...rows}配置，这个写法是错误无用的 */}
  {/* 如果你的行数据唯一标识不是默认的id字段，比如是prodID，就加下面这行 */}
  {/* getRowId={(row) => row.prodID} */}
  onSelectionModelChange={(selectionIds) => {
    if (selectionIds.length > 0) {
      // 用选中的ID匹配完整行数据
      const matchedRow = rows.find(row => row.id === selectionIds[0]);
      // 如果行唯一标识是prodID就改成 row.prodID === selectionIds[0]
      setSelectedRow(matchedRow);
    } else {
      setSelectedRow(null);
    }
  }}
/>

步骤3：将选中行数据传递给其他组件 #

• 如果目标组件是ProductTable的子组件，直接把selectedRow作为props传递即可
• 如果目标组件是同层级/跨层级组件，可以将selectedRow状态提升到两个组件共同的父组件，再通过props分发，也可以根据项目技术栈用Context/Redux等状态管理方案传递。

原有代码优化提示 #

你现有代码中的useEffect依赖配置有问题：当前useEffect依赖rowData，但你全程没有修改rowData，所以useEffect只会触发一次，直接把依赖改成空数组[]即可，避免不必要的监听。

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