映射发送道具 ReactJs

Question

这是数据

const people = [
    {
      img: 11,
      name: "Ahmed",
      job: "developer",
    },
    {
      img: 13,
      name: "Kazim",
      job: "Engineer",
    },
]

我正在尝试映射我单独发送的这些属性。

<Person person={people[0]} />
<Person person={people[1]}/>
<Person person={people[2]} />

我试过了

{people.map((i) => (
  <Person person={people[i]} />
))}

但它给出了这个错误

TypeError: Cannot destructure property 'img' of 'props.person' as it is undefined.

我也试过连同密钥一起发送，但仍然报同样的错误。

我也试过了

 people.map((person,i) => {
      return (
        <Person
          key={i}
          img={person[i].img}
          name={person[i].name}
          job={person[i].job} 
        />
     );
  );

但它给出了这个错误

TypeError: Cannot read property 'img' of undefined

Answer 1

应该是你第二张地图里的人


 people.map((person,i) => {
      return (
        <Person
          key={i}
          img={person.img}
          name={person.name}
          job={person.job} 
        />
     );
  );

Answer 2

map 回调的第一个参数是元素本身，而不是索引。

{people.map((i) => (
  <Person person={i} />
))}

映射发送道具 ReactJs

Mapping on a sending props ReactJs

javascript

reactjs

react-props