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

2 个答案: