传递道具:其中一个道具“key”未定义,但另一个是可读的[重复]

以下是有关文件:

card-list.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;
}

card-list.component.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>
);

card.component.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>
);

应用程序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 怪物 道具是可接近的 道具未定义。为什么 钥匙

我为理解这一点付出了多少努力 :我搜索了一些常见问题,问为什么 props.name setState 异步发生的 componentWillMount 返回一个承诺并且是异步的。

如果上面的答案是正确的,为什么这个问题不是重复的? :为什么我的一个道具 怪物 钥匙 undefined 所以不能使用?为什么异步活动影响其中一个道具而不是另一个?