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

Question

我是新手，如果有人能解释这个问题就好了，这个问题已经回答了，但我还是很困惑。

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子对象无效（找到：带键{}的对象）。如果要呈现子集合，请改为使用数组。

Answer 1

你没有考虑正确的反应。

好友数据来自一些外部来源。您将在组件中使用它。

这里有两个主要组件。

• 卡片：显示单个用户的数据

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

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

Card组件只需要关于一个朋友的信息，所以这就是我们从CardList中提供的全部信息。

请注意，卡片未在CardList中定义，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);

Answer 2

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

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

Answer 3

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

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

这个答案帮助我找到了解决方案https://stackoverflow.com/a/33577681/11556916