追加属性时对象变为未定义

Question

早上好 Stack Overflow，我在我的代码中发现了一些奇怪的错误。我正在通过本课程构建一个简单的联系人应用程序，我有 4 个文件应用程序.jsx： import React from "react";import Card from "./Card.jsx";function App() {  return (    <div>      <h1 className="heading">My Contacts</h1>      <Card id="0" />      <Card id="1" />      <Card id="2" />    </div>  );}export default App;卡片.jsx：function Card(props){  // console.log(contacts[props.id].name);   return ( <div className="card">    <div className="top">      <h2 className="name">{contacts[props.id].name}</h2>      <img className="circle-img"        src={contacts[props.id].imgURL}        alt="avatar_img"      />    </div>    <div className="bottom">      <Details id={props.id} infoType="name" />      {/* <Details infoType="email" /> */}    </div>  </div> )}细节.jsx：import React from "react";import contacts from "../contacts.js";function Details(props){var type = props.infoType;console.log(props.infoType)console.log(contacts[props.id]);console.log(contacts[props.id].name);console.log(contacts[props.id].infoDetails)console.log(contacts[props.id].type); return (<p className="info">fds</p> )} export default Details;这里还有我的 contact.js 目标文件以供参考：const contacts = [  {    name: "Beyonce",    imgURL:      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",    phone: "[phone]",    email: "[e-mail]"  },  {    name: "Jack Bauer",    imgURL:      "https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg",    phone: "[phone]",    email: "[e-mail]"  }, 当在 Details.jsx 中调用前 3 个 console.log() 语句时，会发生什么情况，它们都会准确地记录它们应该记录的内容。第一个记录 infoType，它是我们想要的“名称”。第二个记录有效的 id。第三个通过我们传递的 id 中的联系人数组的索引记录名称的对象但是一旦我到达第 4 个和第 5 个 console.log() 语句，它就无法再读取对象并获取读作“未定义”；我认为这会很容易，因为我们从数组中选择了带有我们传递的 ID 索引的联系人，但我不能通过执行 contacts[props.id].props.infoType 或将 infoType 存储为诸如 infoDetails 之类的变量，而不是仅仅附加诸如 contacts[props.id].infoDetail 之类的变量。它似乎只是打破并变成了一个未定义的对象。任何帮助都会很棒，因为我对这里发生的事情很困惑

Answer 1

我已经解决了这个问题，而不是用点符号附加它，例如

contacts[props.id].varWithPropertyNeeded

而是使用 backet 语法

contacts[props.id][varWithPropertyNeeded]

Answer 2

不确定您仍然想要实现什么，但您正在尝试从您的数组中记录一个不存在的值。如果你想记录你传递给这个组件的道具，只需记录道具而不用像这样访问数组：

function Details(props) {

  const { id, infoType } = props;

  console.log(contacts[id]);

  console.log(contacts[id].name);

  console.log(id);

  console.log(infoType);

  return ( <p className="info">fds</p> )

} 

如果您想将道具附加到数组中，我会更新我的答案。

Answer 3

您的联系对象是：

{

    name: "Beyonce",

    imgURL:

      "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",

    phone: "[phone]",

    email: "[e-mail]"

}

所以你的console.log工作只要你尝试读取定义的属性：name, imgURL,phone和email。

这就是为什么前三个控制台工作（特别是第三个）而后两个不工作的原因。