MUI X Data Grid数据异常：页面仅显示一条重复结果

通过axios获取后端数据后，控制台返回的JSON数据结构正确（截图如下），但页面上的Data Grid仅展示一条重复结果。

代码实现：

export default function ListGrid() {

  const [load, setLoad] = useState(false);
  const [users, setUsers] = useState<IDados[]>([]);  

  interface IDados {
    empresa: number,
    nome: string,
    matricula: number,
    ano: number,
  }

  useEffect(() => {
    setLoad(true);

    if (load === true) {

      axios
        .get("http://localhost:8080/questionarios/all", {
          headers: {
            ...getTokenAuth()
          },
        })
        .then((res) => {
          setUsers(res.data);
          // console.log(res.data);
        })

    }

  }, [load]);  

  const columns: GridColDef[] = [
    {
      field: 'empresa',
      headerName: 'Empresa',
      width: 120,
      headerAlign: 'center',
      align: 'center',
    },

    {
      field: 'nome',
      headerName: 'Nome',
      width: 250,
      headerAlign: 'center',
      align: 'center',
      valueGetter: (params) => {
        return params.getValue(params.id, "colaborador").nome;
      }
    },

    {
      field: 'matricula',
      headerName: 'Matrícula',
      width: 150,
      headerAlign: 'center',
      align: 'center',
    },

    {
      field: 'ano',
      headerName: 'Ano',
      width: 150,
      headerAlign: 'center',
      align: 'center',
    },

    
  ];

  return (
    <Box sx={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={users}
        columns={columns}
        checkboxSelection
        disableSelectionOnClick
        experimentalFeatures={{ newEditingApi: true }}
        localeText={ptBR.components.MuiDataGrid.defaultProps.localeText}
        pageSize={pageSize}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        rowsPerPageOptions={[5, 10, 20]}
        pagination
        initialState={{
          filter: {
            filterModel: {
              items: [],
              quickFilterLogicOperator: GridLinkOperator.Or,
            },
          },
        }}
        components={{ Toolbar: barraPesquisa }}
        getRowId={(row: any) => row.name + row.matricula}
      />
    </Box>
  );
}

核心问题：行ID重复 #

Data Grid依赖唯一的行ID区分每条数据，你的getRowId实现存在错误：

• 后端返回的字段是nome，但你用了不存在的row.name拼接matricula，导致所有行的ID为undefined + matricula，若多条数据的matricula相同，ID就会完全重复，最终Grid只会渲染重复ID中的最后一条数据，表现为页面显示重复结果。

修复步骤 #

1. 修正getRowId的字段名，使用正确的nome：

getRowId={(row: any) => row.nome + row.matricula}

2. 更稳妥的方案：使用后端返回的唯一标识字段（比如每条数据自带的id），避免拼接字段可能产生的重复：

// 假设后端返回的数据包含唯一id字段
getRowId={(row: any) => row.id}

额外优化：简化请求逻辑 #

你的useEffect存在冗余触发问题，初始化时setLoad(true)会导致useEffect重新执行，引发二次请求。可以简化为只执行一次的请求逻辑：

useEffect(() => {
  axios
    .get("http://localhost:8080/questionarios/all", {
      headers: {
        ...getTokenAuth()
      },
    })
    .then((res) => {
      setUsers(res.data);
    })
}, []); // 空依赖数组确保组件挂载时仅请求一次

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