Reactjs 对象作为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”导入React；
从“/Card.js”导入卡片；
const CardList=（{Friends}）=>{
const Cardcomponent=Friends.map（（用户，i）=>{
返回(
)
})
返回(
{Cardcomponent}
)
} 
导出默认卡片列表；

---

对象作为React子对象无效（找到：具有键{}的对象）。如果要呈现子级集合，请使用数组。

Cardcomponent

是组件列表。因此，要显示它们，正如错误消息告诉您的，您必须使用

map

{Cardcomponent.map((component, index) => {
  return (
    <div key={index}>
      {component}
    </div>
  )
}

{Cardcomponent.map（（组件，索引）=>{
返回(
{component}
)
}

您没有正确考虑反应

friends数据来自某个外部源。您将在组件中使用它

这里有两个主要组件

• 卡片：显示关于单个用户的数据
• 卡片列表：显示卡片组件

每个组件都需要不同的数据才能正常工作。当您将好友数组提供给CardList时，您只希望它为列表中的每个好友元素呈现一个卡片组件

React负责幕后的所有DOM操作，因此它需要确保屏幕上的每个元素都可以唯一标识。这就是为什么我们有时需要帮助它，当我们知道可能有很多元素时，告诉它组件使用什么键

卡片组件只需要一个朋友的信息，所以这就是我们从卡片列表中提供的所有信息

请注意，CardList中未定义Card，应用程序中也未定义CardList。这允许我们在其他地方重用这些组件

关于这一点还有很多要说的，但希望这能有所帮助

以下是一个示例应用程序：

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);

从“React”导入React；
从“react dom”导入react dom；
康斯特卡=（{朋友、身份证、姓名、用户名、instagram}）=>(

id:{id}
名称：{name}
用户名：{username}
instagram:{instagram}

);
const CardList=（{friends}）=>(
{friends.map（friends=>）}
);
函数App（）{
康斯特朋友=[
{id:1，姓名：“John Smith”，用户名：“jsmith”，instagram：“N/A”}，
{id:2，姓名：“玛丽·简”，用户名：“mjane”，instagram：“Puppeylover”}，
{
id:3，
名字：“哈利波特”，
用户名：“hpotter”，
instagram：“最佳向导”
}
];
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

当我将{}添加到我的Card.js文件（其他一些文件）的属性中时，问题在另一个文件中的函数使用的道具上得到了解决

这个答案帮助我找到了解决办法

---

你可以用user来替换Friend[id]，例如user.id、user.name等等，另外添加key={i}属性也很重要。我在使用你的代码时没有发现任何问题。你可以做的一件事是@vitomadio所说的。它使代码更容易阅读。下面是一个示例：这并不能让senseI说它是一个好的设计（这仍然是非常主观的），但这至少是他的代码不起作用的原因。

Cardcomponent

是一个变量而不是一个组件，

Friends

包含一个朋友列表，他/她将其映射并将返回的数组保存在

Cardcomponent

中。你在那里做的事情不会起作用。我从来没有说过

Cardcomponent

是一个组件。请重新考虑我的答案又来了。。。

   const Card = ( id , email , name ) => { return( ...
                                             ....);
      to 
   const Card = ( {id , email , name} ) => { return( ...
                                                     ...);