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

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) {&nbsp; const { id, infoType } = props;&nbsp; console.log(contacts[id]);&nbsp; console.log(contacts[id].name);&nbsp; console.log(id);&nbsp; console.log(infoType);&nbsp; return ( <p className="info">fds</p> )}&nbsp;如果您想将道具附加到数组中，我会更新我的答案。

Answer 3

您的联系对象是：{&nbsp; &nbsp; name: "Beyonce",&nbsp; &nbsp; imgURL:&nbsp; &nbsp; &nbsp; "https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg",&nbsp; &nbsp; phone: "[phone]",&nbsp; &nbsp; email: "[e-mail]"}所以你的console.log工作只要你尝试读取定义的属性：name, imgURL,phone和email。这就是为什么前三个控制台工作（特别是第三个）而后两个不工作的原因。