我是 React 新手。如果有人能解释这个问题那就太好了。这个问题已经回答了,但我还是很困惑。
import React from 'react' ;
import Card from './Card.js';
const CardList = ({Friends}) =>{
const Cardcomponent = Friends.map((user , i) => {
return(
<div>
<Card id={Friends[i].id} name={Friends[i].name} username={Friends[i].username} instagram={Friends[i].instagram} />
</div>
)
})
return(
<div>
{Cardcomponent}
</div>
)
}
export default CardList ;
我收到错误:“对象作为 React 子项无效(找到:带有键 {} 的对象)。如果您打算渲染子项集合,请改用数组。”
当我将 {} 添加到 Card.js 文件(其他一些文件)中的属性时,问题就解决了,一直回到另一个文件中的函数使用的 props
const Card = ( id , email , name ) => { return( ...
....);
to
const Card = ( {id , email , name} ) => { return( ...
...);
这个答案帮助我找到了解决方案 https://stackoverflow.com/a/33577681/11556916
你没有考虑正确的反应。
好友数据来自一些外部来源。您将在组件中使用它。
这里有 2 个主要组件。
每个组件都需要不同的数据才能正常工作。当您将朋友数组提供给 CardList 时,您只希望它为列表中的每个朋友元素呈现一个 Card 组件。
React 负责幕后的所有 DOM 操作,因此需要确保屏幕上的每个元素都可以唯一标识。这就是为什么当我们知道可能有很多组件时,我们有时需要告诉它该组件使用什么键来帮助它。
Card 组件只需要有关 1 个朋友的信息,因此这就是我们从 CardList 中提供的全部信息。
注意 Card 没有在 CardList 中定义,CardList 也没有在 App 中定义。如果我们愿意的话,这允许我们在其他地方重用这些组件。
关于这一点还有很多要说的,但希望这能有所帮助。
这是一个示例应用程序:
import React from "react";
import ReactDOM from "react-dom";
const Card = ({ friend, id, name, username, instagram }) => (
<div>
<ul>
<li>id: {id}</li>
<li>name: {name}</li>
<li>username: {username}</li>
<li>instagram: {instagram}</li>
</ul>
</div>
);
const CardList = ({ friends }) => (
<div>
{friends.map(friend => <Card key={friend.id} {...friend} />)}
</div>
);
function App() {
const friends = [
{ id: 1, name: "John Smith", username: "jsmith", instagram: "N/A" },
{ id: 2, name: "Mary Jane", username: "mjane", instagram: "puppyLover" },
{
id: 3,
name: "Harry Potter",
username: "hpotter",
instagram: "best_wizard"
}
];
return (
<div className="App">
<CardList friends={friends} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Cardcomponent
是组件列表。因此,要显示它们,正如错误消息告诉您的那样,您必须使用 map
循环它们
{Cardcomponent.map((component, index) => {
return (
<div key={index}>
{component}
</div>
)
}