React以错误的顺序渲染数组元素，尽管键是唯一的

Question

我有一个组件ScoreTable，它将道具数据显示为html表。问题是，react以错误的顺序渲染某些行。密钥是唯一的和静态的。我使用useEffect在数据更改时打印数据。代码、控制台输出和呈现的表格如下。

代码：

interface Props {
title: string;
data?: ScoreboardT | null;
keys?: string[];
variant?: string;
}
export const ScoreTable: React.FC<Props> = ({
data,
title,
keys = [
'No.',
'Name',
'Played',
'Won',
'Tied',
'Lost',
'GF',
'GA',
'GD',
'Points'
],
variant = 'normal'
}) => {
useEffect(() => {
console.log('new data', data);
}, [data]);
return (
<Table striped bordered variant={variant}>
<thead>
<tr>
<th colSpan={12} className='text-center'>
{title}
</th>
</tr>
<tr>
{keys.map((key, index) => (
<th key={index}>{key}</th>
))}
</tr>
</thead>
<tbody>
{data &&
data.map((row, index) => (
<tr key={row.id}>
<td>{index + 1}</td>
<th>
<Badge>{row.in_group_id}</Badge>
{row.name}
</th>
<td>{row.played_matches}</td>
<td>{row.won_matches}</td>
<td>{row.tied_matches}</td>
<td>{row.lost_matches}</td>
<td>{row.scored_goals}</td>
<td>{row.lost_goals}</td>
<td>{row.goals_difference}</td>
<th>{row.points}</th>
</tr>
))}
</tbody>
</Table>
);
};

控制台输出

new data: null
new data: [
{
"id": "5",
"in_group_id": "A5",
"group_name": "A",
"name": "Polonia Kraków 2",
"tourney_id": 1,
"scored_goals": "23",
"lost_goals": "7",
"points": "17",
"won_matches": "5",
"tied_matches": "2",
"lost_matches": "0",
"played_matches": "7",
"goals_difference": "16"
},
{
"id": "2",
"in_group_id": "A2",
"group_name": "A",
"name": "Progress Angdrychów",
"tourney_id": 1,
"scored_goals": "21",
"lost_goals": "5",
"points": "17",
"won_matches": "5",
"tied_matches": "2",
"lost_matches": "0",
"played_matches": "7",
"goals_difference": "16"
},
{
"id": "8",
"in_group_id": "A8",
"group_name": "A",
"name": "AP Wieliczka",
"tourney_id": 1,
"scored_goals": "9",
"lost_goals": "9",
"points": "10",
"won_matches": "3",
"tied_matches": "1",
"lost_matches": "3",
"played_matches": "7",
"goals_difference": "0"
},
{
"id": "1",
"in_group_id": "A1",
"group_name": "A",
"name": "Sandecja Nowy Sącz",
"tourney_id": 1,
"scored_goals": "12",
"lost_goals": "14",
"points": "9",
"won_matches": "2",
"tied_matches": "3",
"lost_matches": "2",
"played_matches": "7",
"goals_difference": "-2"
},
{
"id": "7",
"in_group_id": "A7",
"group_name": "A",
"name": "Futbol Brzączowice",
"tourney_id": 1,
"scored_goals": "12",
"lost_goals": "13",
"points": "9",
"won_matches": "3",
"tied_matches": "0",
"lost_matches": "4",
"played_matches": "7",
"goals_difference": "-1"
},
{
"id": "4",
"in_group_id": "A4",
"group_name": "A",
"name": "Clepardia Kraków",
"tourney_id": 1,
"scored_goals": "16",
"lost_goals": "12",
"points": "9",
"won_matches": "2",
"tied_matches": "3",
"lost_matches": "2",
"played_matches": "7",
"goals_difference": "4"
},
{
"id": "6",
"in_group_id": "A6",
"group_name": "A",
"name": "Orliki Myślenice",
"tourney_id": 1,
"scored_goals": "3",
"lost_goals": "23",
"points": "4",
"won_matches": "1",
"tied_matches": "1",
"lost_matches": "5",
"played_matches": "7",
"goals_difference": "-20"
},
{
"id": "3",
"in_group_id": "A3",
"group_name": "A",
"name": "AS Progres Kraków",
"tourney_id": 1,
"scored_goals": "5",
"lost_goals": "18",
"points": "2",
"won_matches": "0",
"tied_matches": "2",
"lost_matches": "5",
"played_matches": "7",
"goals_difference": "-13"
}
]

表渲染表

我的问题是：如何让React按照数组记录在控制台中的顺序渲染这些元素。

Answer 1

在映射数组之前，必须对数组进行排序：

JS Native：

<tbody>
{data &&
data
.sort((a,b) => a.id - b.id) // <-- this is the line to be added
.map((row, index) => (
<tr key={row.id}>
<td>{index + 1}</td>
<th>
<Badge>{row.in_group_id}</Badge>
{row.name}
</th>
<td>{row.played_matches}</td>
<td>{row.won_matches}</td>
<td>{row.tied_matches}</td>
<td>{row.lost_matches}</td>
<td>{row.scored_goals}</td>
<td>{row.lost_goals}</td>
<td>{row.goals_difference}</td>
<th>{row.points}</th>
</tr>
))}
</tbody>

Lodash:

<tbody>
{data &&
_.sortBy(data, 'id')
.map((row, index) => (