在react.js中获取当前对象数据

Question

我有一个对象数组。

例如：

 data=[
  {
    name: 'Person1',
    age: 30,
    weight: 200
  },
  {
    name: 'Person2',
    age: 30,
    weight: 200
  },
  {
    name: 'Person3',
    age: 30,
    weight: 200
  }
]

我正在通过数组映射，并且仅返回Person和age。

当我单击该人时，如何获取完整的对象数据。

例如，我正在渲染以下内容。

我想console.log我单击的特定对象的所有对象属性。

我正在尝试简化这一过程，希望它不会造成混淆。

 return(
    //This is a function that is mapping through the objects and printing out each objects Name and age only
    this.loopData()  
    )



 loopData = ()=>{
    return data.map(obj,i) =>{
    return(<h1 onClick={this.showme} key={i}>{obj.name}</h1>}
    }

我有作为showme =（）=> console.log（this）的onlick

如果有信息，我将在什么标签下寻找？

Answer 1

如果要通过字符串值访问对象属性，可以执行以下操作：

var data = {
 Person1: {
  age: 22,
  weight: 180
 }
};

var _clickedid = "Person1";
var _clickedobj = data[_clickedid];
console.log(_clickedobj);

Answer 2

使用Array.prototype.find（）就可以得到person名称为'Person1' ，年龄30

码：

 const data = [{name: 'Person1',age: 30,weight: 200},{name: 'Person2',age: 30,weight: 200},{name: 'Person3',age: 30,weight: 200}]; const person = data.find(p => p.name === 'Person1' && p.age === 30); console.log(person); 

Answer 3

据我了解，您正在尝试实现这样的目标，但我可能会误会。

 const data = [ { name: 'Person1', age:30, weight:200 }, { name: 'Person2', age:20, weight:180 }, { name: 'Person3', age:10, weight:100 } ] const generateHtml = data => { const list = document.createElement('ul'); document.body.appendChild(list); for (let i = 0; i < data.length; i++) { let item = document.createElement('li'); item.textContent = data[i].name; list.appendChild(item) item.addEventListener('click', event => { console.log(data[i]); }); } } generateHtml(data); 

Answer 4

  On calling the below functional component renders a button with person name. Onclicking the person will log it in console

    const renderPerson = () => {
      let data=[
        {
          name: 'Person1',
          age: 30,
          weight: 200
        },
        {
          name: 'Person2',
          age: 30,
          weight: 200
        },
        {
          name: 'Person3',
          age: 30,
          weight: 200
        }
      ]


      return(
        <div>
          {data.map(person => (
             <button onClick={() => console.log(JSON.stringify(person))}>person.name</button>       
          ))}
        </div>
      )
    }

Answer 5

您应该在地图循环中绑定人，以便能够在您的点击处理程序功能中获取被点击的人。

showPerson(person) {
  // do stuff 
  console.log(JSON.stringify(person))
}

render() {
  let data = [
    {
      name: 'Person1',
      age: 30,
      weight: 200
    },
    {
      name: 'Person2',
      age: 30,
      weight: 200
    },
    {
      name: 'Person3',
      age: 30,
      weight: 200
    }
  ];

  return(
    <div>
      {
        data.map(person => (
          <button
            onClick={this.showPerson.bind(null, person)}>
            person.name
          </button>       
        ))
      }
    </div>
  )
}