如何在点击第一个DataGrid行时正确更新第二个DataGrid的数据？

问题场景 #

我有两个DataGrid组件，第一个表格点击行时，想把该行的Users列数据（字符串列表）处理后作为第二个表格的数据源。但目前直接赋值teamPerson后，第二个表格没有更新数据，请问怎么正确更新第二个DataGrid的数据？

原代码片段：

<DataGrid density="compact" disableDensitySelector
    rows={data}
    columns={columns}
    onRowClick={handleRowClick}
    style={{ width: '70%', height: '350px', marginTop: '15px', marginLeft: '10px', marginRight: '15px' }}
    />

<DataGrid density="compact" disableDensitySelector
    rows={teamPerson} // 点击第一个表格行前无数据
    columns={columns2}
    style={{ width: '30%', height: '350px', marginTop: '15px', marginRight: '10px' }}
/>

const handleRowClick = (params) => {
    teamPerson = splitData(params.row.Users);
};

const columns = [ 
    { headerName: "Team Id", field: "TeamId", width: 200 },
    { headerName: "Team Name", field: "TeamName", width: 200 },
    { headerName: "Email", field: "Email", width: 150 }
];

const columns2 = [
    { headerName: "Team members", field: "user", width: 200 }
];

function splitData(str: any) {
    const response = [];
    let cont = 0;

    str.forEach((element) => teamPerson.push(
        { id: cont++, user: element }
    ));

    return response;
}

解决方案 #

直接修改普通变量teamPerson不会触发React组件重渲染，第二个DataGrid无法感知数据变化。必须通过React状态管理实现数据更新与视图同步，具体修改如下：

• 将teamPerson改为状态变量：用useState初始化，状态更新时自动触发组件重渲染
• 调整handleRowClick逻辑：通过状态更新函数设置新数据，而非直接赋值
• 优化splitData函数：让函数返回处理后的数组，避免直接操作外部变量，保持纯函数特性

修改后的完整代码：

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';

// 假设data是已定义的数据源
const YourComponent = () => {
  // 初始化teamPerson状态为空数组
  const [teamPerson, setTeamPerson] = useState<Array<{id: number; user: string}>>([]);

  const columns = [ 
    { headerName: "Team Id", field: "TeamId", width: 200 },
    { headerName: "Team Name", field: "TeamName", width: 200 },
    { headerName: "Email", field: "Email", width: 150 }
  ];

  const columns2 = [
    { headerName: "Team members", field: "user", width: 200 }
  ];

  const handleRowClick = (params) => {
    // 处理数据后更新状态
    const processedData = splitData(params.row.Users);
    setTeamPerson(processedData);
  };

  function splitData(users: string[]) {
    // 用map直接生成目标数组，避免副作用
    return users.map((user, index) => ({
      id: index,
      user: user
    }));
  }

  return (
    <div style={{ display: 'flex' }}>
      <DataGrid 
        density="compact" 
        disableDensitySelector
        rows={data}
        columns={columns}
        onRowClick={handleRowClick}
        style={{ width: '70%', height: '350px', marginTop: '15px', marginLeft: '10px', marginRight: '15px' }}
      />

      <DataGrid 
        density="compact" 
        disableDensitySelector
        rows={teamPerson}
        columns={columns2}
        style={{ width: '30%', height: '350px', marginTop: '15px', marginRight: '10px' }}
      />
    </div>
  );
};

export default YourComponent;

关键修改说明 #

1. 状态管理：useState创建的teamPerson是响应式状态，调用setTeamPerson更新时，React会重新渲染组件，第二个DataGrid就能获取到新数据
2. 函数优化：splitData改用map生成数组，不再依赖外部变量teamPerson，避免了不必要的副作用，代码更健壮
3. 更新逻辑：handleRowClick中先处理数据，再通过状态更新函数传递新值，确保React能捕获到数据变化并更新视图

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