数据网格组件要求所有行都具有唯一的 `id` 属性答案

【问题标题】：The data grid component requires all rows to have a unique `id` property数据网格组件要求所有行都具有唯一的 `id` 属性
【发布时间】：2022-08-13 20:38:27
【问题描述】：

我知道我必须使用 getRowId，但是如何使用 statId 与 id 相反？它是独一无二的。或者为每个人生成一个id 属性？

错误：MUI：数据网格组件要求所有行都具有唯一的id 属性。或者，您可以使用 getRowId 属性为每一行指定一个自定义 ID。在 rows 属性中提供了没有 id 的行： {\"statId\":813183,\"teamId\":3,\"season\":2021,\"name\":\"Atlanta Hawks\",\"team\":\"ATL\", \"wins\":41,\"losses\":31,\"fieldGoalsMade\":3492.1,\"fieldGoalsAttempted\":7468.1,\"fieldGoalsPercentage\":55.6,\"twoPointersMade\":2427.9,\" twoPointersAttempted\":4612.1,\"twoPointersPercentage\":62.5,\"threePointersMade\":1064.2,\"threePointersAttempted\":2856,\"threePointersPercentage\":44.3,\"freeThrowsMade\":1684.8,\"freeThrowsAttempted\ ":2074.8,\"freeThrowsPercentage\":96.5,\"进攻篮板\":903.6,\"防守篮板\":3002.2,\"篮板\":3905.9,\"助攻\":2065.3,\"抢断\": 598.1,\"blockedShots\":405.4,\"turnovers\":1086.7,\"personalFouls\":1655.1,\"points\":9733.2,\"doubleDoubles\":120.1,\"tripleDoubles\":1.4}

import { useState, useEffect } from \'react\';
import type { NextPage } from \'next\';
import Container from \'@mui/material/Container\';
import Box from \'@mui/material/Box\';
import { DataGrid, GridColDef, GridRowIdGetter } from \'@mui/x-data-grid\';
import { Grid, Paper, Typography } from \'@mui/material\';
import Skeleton from \'@mui/material/Skeleton\';
import { blue } from \'@mui/material/colors\';

import FormOne from \'./../src/FormOne\';
import { TeamSeason } from \'./../src/lib/interfaces/TeamSeason\';

const LoadingSkeleton = () => (
  <Box
    sx={{
      height: \'max-content\',
    }}
  >
    {[...Array(10)].map((_, index) => (
      <Skeleton variant=\"rectangular\" sx={{ my: 4, mx: 1 }} key={index} />
    ))}
  </Box>
);

const columns: GridColDef[] = [
  { field: \'statId\', headerName: \'Stat ID\' },
  { field: \'name\', headerName: \'Name\', width: 300 },
  { field: \'season\', headerName: \'Season\', width: 600 },
];

const Home: NextPage = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setInterval(
      () =>
        fetch(\'https://localhost:7000/TeamSeason/2021\')
          .then((response) => response.json())
          .then((data) => {
            setData(data);
            setLoading(false);
          }),
      3000
    );
  }, []);

  return (
    <Container
      maxWidth={false}
      sx={{
        height: \'100vh\',
        overflow: \'auto\',
        background: `linear-gradient(to right, ${blue[200]}, ${blue[500]})`,
      }}
    >
      <Container maxWidth=\"lg\" sx={{ mt: 3, mb: 3 }}>
        <Grid container spacing={{ xs: 2, md: 3 }}>
          <Grid item xs={12} md={6}>
            <Paper sx={{ padding: 3 }}>
              <FormOne data={data} />
            </Paper>
          </Grid>

          <Grid item xs={12} md={6}>
            <Paper sx={{ padding: 3 }}></Paper>
          </Grid>

          <Grid item xs={12}>
            <Paper sx={{ padding: 3 }}>
              <DataGrid
                sx={{ height: \'650px\' }} // either autoHeight or this
                rows={data}
                columns={columns}
                pageSize={10}
                // autoHeight
                rowsPerPageOptions={[10]}
                disableSelectionOnClick
                disableColumnMenu
                disableColumnSelector
                components={{
                  LoadingOverlay: LoadingSkeleton,
                }}
                loading={loading}
              />
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Container>
  );
};

export default Home;

export interface TeamSeason {
  statId: number;
  teamId: number;
  season: number;
  name: string;
  team: string;
  wins: number;
  losses: number;
  fieldGoalsMade: number;
  fieldGoalsAttempted: number;
  fieldGoalsPercentage: number;
  twoPointersMade: number;
  twoPointersAttempted: number;
  twoPointersPercentage: number;
  threePointersMade: number;
  threePointersAttempted: number;
  threePointersPercentage: number;
  freeThrowsMade: number;
  freeThrowsAttempted: number;
  freeThrowsPercentage: number;
  offensiveRebounds: number;
  defensiveRebounds: number;
  rebounds: number;
  assists: number;
  steals: number;
  blockedShots: number;
  turnovers: number;
  personalFouls: number;
  points: number;
  doubleDoubles: number;
  tripleDoubles: number;
}

标签： reactjs typescript material-ui next.js datagrid

【解决方案1】：

您可以在 dataGrid 道具中使用它：

getRowId={(row) => row.statId}

【讨论】：

感谢您的回答，我已经尝试过了，但是因为它是打字稿，所以我尝试了getRowId={(row: TeamSeason) => row.statId}，它警告我row 必须是GridRowIdGetter 类型。

【解决方案2】：

如果您使用的是 MongoDB，则应包含此行 getRowId={(row) => row._id} 因为 MongoDB 的 ID 被命名为 _id 这将寻找 _id 选项并选择它作为唯一 ID

【讨论】：

【解决方案3】：

datagrid 需要一个 id 你需要名为“id”的列吗 (rowid:statUs})

【讨论】：