import { people } from "./data.js";
import { getImageUrl } from "./utils.js";
export default function List() {
const chemists = people.filter((person) => person.profession === "chemist");
const everyoneElse = people.filter(
(person) => person.profession !== "chemist"
);
return (
<article>
<h1>Scientists</h1>
<h2>Chemists</h2>
<ul>
{chemists.map((person) => (
<li key={person.id}>
<img src={getImageUrl(person)} alt={person.name} />
<p>
<b>{person.name}:</b>
{" " + person.profession + " "}
known for {person.accomplishment}
</p>
</li>
))}
</ul>
<h2>Everyone Else</h2>
<ul>
{everyoneElse.map((person) => (
<ListItem person={person} />
))}
</ul>
</article>
);
}
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>
);
}字符串
第一个列表是渲染的，但第二个列表显示的是未定义的请指导我哪里错了
尝试使用不同的方法渲染两个列表，但是第二个列表失败了，有人能指导我吗？
1条答案
按热度按时间dgsult0t1#
问题在于
Person对象传递给ListItem组件的方式。将props传递给组件使它们可以作为对象访问。然而，ListItem函数试图直接访问person，就好像它是object一样，这可能导致问题。这个问题可以通过重新构造
props如何传递到ListItem组件来解决。更新ListItem组件：
字符串
函数的参数列表中的
{person}使用结构化从prop对象中提取person属性。这样您就可以在ListItem组件中正确访问Person对象。