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

Question

以下是有问题的文件：

卡片-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;
}

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

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 returns 承诺并且是异步的。

如果上面的答案是正确的，为什么这个问题不是重复的？：为什么我的道具之一 monster 可以使用？但是单独 key 是 undefined 所以不能使用？为什么异步 activity 影响其中一个 props 但不影响另一个？

Answer 1

React 中的 key prop 是一种私有变量，仅用于渲染器验证哪些项目发生了变化，哪些没有发生变化。因此，您将无法访问 key 道具。

Answer 2

Th key prop 在子组件内部不可访问，因为它是一个特殊的 prop。

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

没有在内部访问密钥的用例。

阅读有关键的信息 in the docs。

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

Passing props: One of the props `key` is undefined but the other is readable

javascript

jsx

reactjs

react-props