Javascript 传递道具：道具'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;
}

---

卡片列表.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>
);

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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./component/card list/card list.component”导入{CardList}
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
怪物：[]
};
}
componentDidMount（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
.then（users=>this.setState（{monsters:users}））；
}
渲染（）{
返回(
);
}
}
导出默认应用程序；

对于React和Javascript，我的问题是：在card list.component.jsx中，如果我的术语正确，我将

key

和

monster

作为

道具

传递给

card

组件。当

怪物

道具可访问时，

键

道具未定义。为什么

键

道具未定义

我为理解这一点付出了多少努力：我搜索了一些一般性问题，询问为什么

道具.name

未定义，关于

setState

异步发生和

componentWillMount

返回一个承诺并且是异步的

---

如果上述答案正确，为什么这个问题不重复？：为什么我的一个道具

monster

可以使用？但是

键

本身是

未定义的

所以不能使用？为什么异步活动影响一个道具而不影响另一个？

React中的

键
道具是一种私有变量，仅用于渲染器验证哪些项目更改了，哪些没有更改。因此，您将无法访问
键
道具。
Th
键
道具在子组件内不可访问，因为它是一个特殊道具

键
道具的主要用例是允许React跟踪列表中的项目，以防止不必要的重新渲染

没有内部访问密钥的用例

阅读有关钥匙的内容。
你已经完成了所有工作，写了一个完整的问题。您是否考虑过创建一个可运行的代码段？@Mike对不起，我遵循了这个问题的格式：，以前从未发布过JS问题。在子组件中无法访问密钥。关键道具是React，用于跟踪列表中的项目。没有内部访问密钥的用例。钥匙是一种特殊的道具。读一读关于钥匙的书。@JMadelaine我希望你能回答，而不是评论，这样我至少可以对努力进行投票。我会把我的评论作为回答，明白了。我将该属性重命名为
name
，并且可以通过控制台记录并打印它。真不敢相信这么简单。嘿，我不得不接受杰玛德莱恩的回答，因为我第一次在评论部分看到了他。