无法从React prop访问属性

Question

第一个列表是渲染的，但第二个列表显示未定义
请引导我在哪里错了

尝试使用不同的方法渲染这两个列表，但是第二个列表是失败的，有人可以指导我在我错了的地方

问题是

Person

对象传递给

Answer 1

组件的方式。将

props

传递到一个组件使它们可以作为对象访问。但是，

ListItem

函数试图直接访问人，就像是

objectprops

，这可能导致问题。

可以通过重组如何传递到

ListItem

组件来解决这个问题。

updateListItem组件：

function ListItem({ person }) {
  console.log(person);
  return (
    <li key={person.id}>
      <img src={getImageUrl(person)} alt={person.name} />
      <p>
        <b>{person.name}:</b>
        {" " + person.profession + " "}
        known for {person.accomplishment}
      </p>
    </li>
  );
}

{person}

在函数的参数列表中使用破坏性来从

prop

对象中提取人属性。这样，您可以在

Person

组件内正确访问

ListItem

对象。