对象作为 React 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染一组孩子，请改用数组答案

【问题标题】：Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead对象作为 React 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染一组孩子，请改用数组
【发布时间】：2019-10-12 05:32:37
【问题描述】：

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

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 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染一组子项，请改用数组。

【问题讨论】：

您可以将 Friend[id] 替换为用户，例如。 user.id, user.name 等，添加 key={i} 属性也很重要。
我没有发现使用您的代码有任何问题。正如@vitomadio 所说，您可以做的一件事就是。它使代码更易于阅读。这是示例：stackblitz.com/edit/react-zrspy5

标签： reactjs react-native react-redux

【解决方案1】：

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

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

【讨论】：

这没有意义
我从来没有说过这是一个好的设计（这仍然是相当主观的），但这至少是他的代码不起作用的原因。
Cardcomponent 是一个变量而不是一个组件，Friends 包含一个朋友列表，他/她将其映射并将返回的数组保存在Cardcomponent 中。你在那里所做的将不起作用。
我从未说过Cardcomponent 是一个组件。请再次阅读我的答案...

【解决方案2】：

你没有考虑做出正确的反应。

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

这里有 2 个主要组件。

卡片：显示有关单个用户的数据
CardList：显示卡片组件

您的每个组件都需要不同的数据才能正常工作。当您将朋友数组提供给 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);

【讨论】：

【解决方案3】：

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

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

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

【讨论】：