即使对象存在，也要从对象中获取未定义的内容

Question

我正在尝试通过.filter访问对象中的数据，并且正在获取对象。我环顾了堆栈溢出的问题，但它所谈论的只是使用JSON.stringify，它将数据转换为字符串，但是我仍然无法访问所需的功能（名称，年龄和电子邮件）。我尝试使用

friend[0]进一步简化了它，但是当我执行friend[0].name时，它返回未定义的名称。

这是EditForm代码，我最终将使用数据来更改输入，但是我希望能够首先访问数据，因为我想将其用作占位符：

import React from 'react';

class EditForm extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      friend: {
        name: '',
        email: '',
        age: ''
      }
    }
  }


  render(){
    const id = this.props.match.params.id;
    const friend = this.props.friends.find(friend => {return `${friend.id}` === id})
    console.log(friend)
    return(
      <div>
        <h1> Edit Friend</h1>

      </div>

    )
  }
}

export default EditForm;

Answer 1

据我所知，这应该可以工作。但是filter函数将返回一个有单个朋友的数组。也许这段代码可以帮助您。如果不是，那么最好以堆栈式方式重新创建示例，以便我们可以看到它的发生。

const friends = [{
  id: 1,
  name: 'Ben',
  age: 30,
  email: 'sampleemail@email.com',
}, {
  id: 2,
  name: 'Austen',
  age: 29,
  email: 'newemail@emails.com'
}]

const id = 2;

const friend = friends.find(friend => friend.id === id);

console.log(friend);
console.log(friend.name);

Answer 2

const friends = [{
  id: 1,
  name: 'Ben',
  age: 30,
  email: 'sampleemail@email.com',
}, {
  id: 2,
  name: 'Austen',
  age: 29,
  email: 'newemail@emails.com'
}]

const id = 1;

let friend = friends.filter(friend => friend.id === id);

console.log(friend[0]);
console.log(friend[0].name);