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

Question

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

Answer 1

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

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

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

Answer 2

你没有考虑正确的反应。

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

这里有 2 个主要组件。

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

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

Answer 3

Cardcomponent

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

map

循环它们

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