传递道具:其中一个道具"key"未定义，但另一个是可读的

以下是有问题的文件：

卡片列表.styles.css：src -> component -> card-list -> card-list.styles.css

.card-list {
width: 85vw;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}

卡片列表.组件.jsx：src -> component -> card-list -> card-list.component.jsx

import React from 'react';
import './card-list.styles.css';
import {Card} from '../card/card.component';
export const CardList = (props) => (
<div className="card-list">
{props.monsters.map(monster => (
<Card key={monster.id} monster={monster}/>
))}
</div>
);

卡片组件.jsx:src -> component -> card -> card.component.jsx

import React from 'react';
export const Card = props => (
<div>
{console.log(props.key)}
<h1>{props.monster.name}</h1>
</div>
);

App.js:src -> App.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {CardList} from './component/card-list/card-list.component'
class App extends Component {
constructor() {
super();
this.state = {
monsters: []
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState({monsters : users}));
}
render () {
return  (
<div className="App">
<CardList monsters={this.state.monsters}/>
</div>
);
}
}
export default App;

对于React和Javascript来说，我的问题是：在card-list.component.jsx中，如果我的术语是正确的，我将把key和monster作为props传递给Card组件。虽然monster道具是可访问的，但key道具是未定义的。为什么key道具未定义？

我为理解这一点付出了什么努力：我搜索了一些通用问题，询问为什么props.name是未定义的，有多个关于setState异步发生的答案，而componentWillMount返回了一个promise并且是异步的。

如果上面的答案是正确的，为什么这个问题不是重复的：为什么我的道具monster可以使用？但是CCD_ 16单独使用CCD_？为什么异步活动影响其中一个道具而不影响另一个道具？