传递道具：道具“key”之一是未定义的，但另一个是可读的[重复]

Posted 2023-02-22

【中文标题】传递道具：道具“key”之一是未定义的，但另一个是可读的[重复]

【英文标题】：Passing props: One of the props `key` is undefined but the other is readable [duplicate]

【发布时间】：2020-07-05 15:30:50

【问题描述】：

这里是有问题的文件：

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

---

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 返回一个承诺并且是异步的。

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

【问题讨论】：

您已经完成了所有工作，编写了一个详尽的问题。您是否考虑过创建一个可运行的 sn-p？

@Mike 对不起，我按照这个问题的格式：***.com/questions/38210938/…，之前从来没有发过 JS 问题。

子组件内部无法访问键。关键道具是让 React 跟踪列表中的项目。没有在内部访问密钥的用例。关键是一个特殊的道具。阅读有关键的信息in the docs。

@JMadelaine 我希望你能回答而不是发表评论，这样我至少可以支持这项工作。

我会把我的评论作为答案

【参考方案1】：

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

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

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

阅读有关密钥in the docs的信息。

【参考方案2】：

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

【讨论】：

明白了。我将该属性重命名为name，并且能够通过控制台记录它并打印出来。简直不敢相信这么简单。

嘿，我必须接受JMadelaine 的回答，因为我首先在评论部分看到了他的回答。